html5 canvas实现雷达扫描动画特效

作者：System 时间：2024年08月17日分类：所有,html5 字数：1537




<!DOCTYPE html>
<html>
<head>
    <title>雷达扫描动画</title>
    <style>
        canvas {
            background-color: #222;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = 150;
        let angle = 0;
 
        function drawRadar() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // 绘制雷达主体
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            ctx.strokeStyle = 'white';
            ctx.stroke();
 
            // 绘制扫描的扇形区域
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, angle, angle + 0.5, false);
            ctx.lineWidth = 15;
            ctx.strokeStyle = 'white';
            ctx.stroke();
            ctx.fillStyle = 'white';
            ctx.fill();
 
            angle += 0.1; // 增加角度以绘制下一个扇形
 
            if (angle > 2 * Math.PI) {
                angle = 0; // 重置角度
            }
 
            requestAnimationFrame(drawRadar); // 递归调用实现持续更新
        }
 
        drawRadar(); // 开始绘制雷达扫描动画
    </script>
</body>
</html>

这段代码使用HTML5 <canvas>元素创建了一个简单的雷达扫描动画。通过使用requestAnimationFrame实现了循环的重绘，以实现动态的扫描效果。代码中包含了清除画布、绘制雷达轮廓、绘制扫描扇形的逻辑，并且会不断更新扇形的角度来模拟扫描动作。

html5 canvas实现雷达扫描动画特效

评论已关闭

推荐阅读