使用canvas制作一个加载的动画

在前端开发中，使用HTML5的<canvas>元素可以创建丰富的图形和动画。下面是一个简单的示例，展示如何使用<canvas>制作一个加载动画。

首先，在HTML文件中添加一个<canvas>元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Animation with Canvas</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f3f3f3;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="loadingCanvas" width="200" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

然后，在script.js文件中添加JavaScript代码来绘制加载动画：

const canvas = document.getElementById('loadingCanvas');
const ctx = canvas.getContext('2d');

let angle = 0;
const speed = 0.02;
const radius = 70;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

function drawCircle(x, y, radius, color) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布上的内容

    // 绘制外圈
    drawCircle(centerX, centerY, radius, '#eee');

    // 绘制加载部分
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, -0.5 * Math.PI, angle - 0.5 * Math.PI, false);
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#3498db'; // 设置加载部分的颜色
    ctx.stroke(); // 绘制加载部分

    // 更新角度并检查是否完成一圈
    angle += speed;
    if (angle > Math.PI * 2) {
        angle = 0; // 如果完成一圈，则重置角度为0
    }

    requestAnimationFrame(animate); // 循环调用animate函数以持续动画效果
}

animate(); // 开始动画效果

这段代码创建了一个简单的加载动画，其中包含一个灰色的外圈和一个蓝色的加载部分。加载部分会随着时间的推移而逐渐增加，当完成一圈时，它会重新开始。你可以通过调整speed变量的值来控制加载速度，通过调整radius变量的值来控制圆圈的大小，以及通过修改ctx.strokeStyle的值来改变加载部分的颜色。