html建一个画布,在画布上演示尺规作角的动画
时间: 2024-04-16 16:29:33 浏览: 17
你可以使用HTML5的canvas元素来创建一个画布,并使用JavaScript来编写动画。下面是一个简单的示例代码,演示了如何在画布上绘制尺规作角的动画:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 获取画布元素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置动画帧率
var FPS = 60;
// 设置动画参数
var angle = 0;
var radius = 100;
// 动画循环
function animate() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 计算角度对应的坐标
var x = canvas.width / 2 + radius * Math.cos(angle);
var y = canvas.height / 2 + radius * Math.sin(angle);
// 绘制圆点
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// 绘制尺规作角
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo(x, y);
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
// 更新角度
angle += Math.PI / 180;
// 循环调用动画函数
setTimeout(function() {
requestAnimationFrame(animate);
}, 1000 / FPS);
}
// 启动动画
animate();
</script>
</body>
</html>
```
在这个示例中,我们使用`<canvas>`元素创建了一个400x400像素大小的画布,并通过JavaScript获取到了画布的上下文对象`ctx`。然后,我们在动画循环中根据角度计算圆点的坐标,并使用`ctx`对象来绘制圆点和尺规作角。
请注意,这只是一个简单的示例,你可以自行修改代码样式和动画效果来满足你的需求。希望对你有所帮助!