js中绘制一个运动的圆
时间: 2023-03-31 12:02:57 浏览: 102
可以使用canvas标签和JavaScript来绘制一个运动的圆。首先,需要获取canvas元素的上下文,然后使用setInterval()函数来定时更新圆的位置,最后使用context.arc()函数来绘制圆。具体的代码实现可以参考以下示例:
```
// 获取canvas元素
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 定义圆的初始位置和速度
var x = 50;
var y = 50;
var vx = 5;
var vy = 2;
// 定时更新圆的位置
setInterval(function() {
// 清除画布
context.clearRect(, , canvas.width, canvas.height);
// 更新圆的位置
x += vx;
y += vy;
// 检测边界碰撞
if (x + 20 > canvas.width || x - 20 < ) {
vx = -vx;
}
if (y + 20 > canvas.height || y - 20 < ) {
vy = -vy;
}
// 绘制圆
context.beginPath();
context.arc(x, y, 20, , 2 * Math.PI);
context.fillStyle = "red";
context.fill();
}, 30);
```