用canvas做一个加载动画
时间: 2024-01-30 19:03:06 浏览: 27
好的,以下是一个简单的加载动画实现:
HTML代码:
```html
<canvas id="loading-canvas" width="100" height="100"></canvas>
```
JavaScript代码:
```javascript
const canvas = document.getElementById('loading-canvas');
const context = canvas.getContext('2d');
const radius = 20;
const lineWidth = 5;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let angle = 0;
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(centerX, centerY, radius, 0, Math.PI * 2);
context.strokeStyle = '#999';
context.lineWidth = lineWidth;
context.stroke();
context.beginPath();
context.arc(
centerX + radius * Math.cos(angle),
centerY + radius * Math.sin(angle),
lineWidth / 2,
0,
Math.PI * 2
);
context.fillStyle = '#ff8c00';
context.fill();
angle += 0.1;
requestAnimationFrame(draw);
}
draw();
```
这个加载动画的实现使用了canvas绘制圆形,然后在圆周上通过不断改变角度来移动小球,从而实现了加载动画的效果。