使用canvas制作一个无人机旋转特效

要使用 HTML5 的 <canvas> 元素制作一个无人机旋转特效，你需要遵循以下步骤：

设置 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无人机旋转特效</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="droneCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

编写 JavaScript 代码 (script.js 文件)：

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

// 无人机中心点位置
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 无人机属性
const drone = {
    x: centerX,
    y: centerY,
    size: 100, // 无人机大小（可根据需要调整）
    rotation: 0, // 旋转角度
    speed: 0.02, // 旋转速度（弧度/帧）
    color: 'blue' // 无人机颜色（可根据需要调整）
};

function drawDrone(drone) {
    ctx.save();
    ctx.translate(drone.x, drone.y); // 移动到无人机中心点
    ctx.rotate(drone.rotation); // 旋转无人机
    ctx.fillStyle = drone.color;
    // 绘制一个简单的无人机形状，你可以根据需要绘制更复杂的形状或使用图像
    ctx.fillRect(-drone.size / 2, -drone.size / 2, drone.size, drone.size); // 正方形代表无人机主体
    // 可以在此添加更多细节，如螺旋桨等
    ctx.restore();
}

function update() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 更新无人机旋转角度
    drone.rotation += drone.speed;
    // 绘制无人机
    drawDrone(drone);
    // 请求下一帧绘制
    requestAnimationFrame(update);
}

// 开始动画循环
update();