在前端开发中，使用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的值来改变加载部分的颜色。