Javascript 绘制画布上的粒子，但不设置动画？

画布上的圆是绘制的，但没有运动，尽管调用了moveCircle（）函数。在下面，您可以找到带有属性的

类圆

、使用这些属性生成圆并将其存储到数组中的

类圆工厂

、以及循环遍历圆数组并负责绘制和移动圆的

animate（）

函数。请全屏运行代码段

//画布
const canvas=document.getElementById（'canvas'）；
//获取上下文
const ctx=canvas.getContext（'2d'）；
//圆类
班级圈子{
构造器（x，y，speedX，speedY）{
这个.x=x；
这个。y=y；
这个r=30；
this.speedX=speedX；
这个。迅速的=迅速的；
}
}  
类循环工厂{
构造函数（）{
this.circles=[]；
}
发电循环（numOfCir）{
const{circles}=这个；
for（设i=0；icanvas.width-r | | x+speedXcanvas.height-r | | y+speedY{
clearRect（0，0，canvas.width，canvas.height）；
shape.circles.forEach（圆=>{
形状。移动圆（圆）；
形状。画圆（圆）；
})
window.requestAnimationFrame（动画）；
}
制作动画（）
在
移动圆（{x，y，r，speedX，speedY}）
中，因为您正在分解圆对象，实际上并没有更新其状态，您只是在修改随后被丢弃的局部变量。相反，将其写成
moveCircles（circle）
，并将坐标和速度写成
circle.x
，
circle.y
，依此类推