html5 canvas实现雷达扫描动画特效
warning:
这篇文章距离上次修改已过444天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>雷达扫描动画</title>
<style>
canvas {
background-color: #000;
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, (2 * Math.PI / 360) * angle, (2 * Math.PI / 360) * (angle + 30), false);
ctx.lineWidth = 10;
ctx.strokeStyle = 'white';
ctx.stroke();
// 更新扫描角度
angle += 1;
if (angle > 360) {
angle = 0;
}
}
setInterval(drawRadar, 100); // 每100毫秒调用一次drawRadar函数
</script>
</body>
</html>这段代码使用HTML5 <canvas>元素创建了一个简单的雷达扫描动画。drawRadar函数被定时调用，以便不断更新雷达扫描的角度，从而形成动画效果。代码中使用了setInterval函数来实现定时器，并通过清除画布(clearRect)和重绘画布(arc)来创建动画。
评论已关闭