Canvas圆形已绘制但无动画，调用moveCircles()仍无效的技术排查请求

你遇到的问题核心在于**moveCircles方法里修改的是局部变量，而非Circle实例的属性**，导致圆形的位置和速度根本没被更新，自然看不到运动效果。

问题根源 #

在moveCircles方法中，你使用了解构赋值({x, y, r, speedX, speedY})，这会把传入的circle对象的属性复制到局部变量里。当你修改x += speedX或者speedX = -speedX时，只是修改了这些局部变量，原circle对象的x、speedX等属性完全没变化，所以每次绘制的还是初始位置的圆形。

修正后的代码 #

只需要修改moveCircles方法，直接操作传入的circle对象即可：

class CircleFactory {
 // ... 其他代码不变
 moveCircles(circle) {
  // 直接操作circle对象的属性
  if (circle.x + circle.speedX > canvas.width - circle.r || circle.x + circle.speedX < circle.r) {
    circle.speedX = -circle.speedX;
  }
  if (circle.y + circle.speedY > canvas.height - circle.r || circle.y + circle.speedY < circle.r) {
    circle.speedY = -circle.speedY;
  }
  circle.x += circle.speedX;
  circle.y += circle.speedY;
 }
 // ... 其他代码不变
}

为什么这样有效？ #

现在我们直接引用传入的circle对象，修改的是它自身的x、y、speedX、speedY属性，这些变化会被保留下来。在下一次animate循环中，绘制的就是更新后的位置，圆形自然就会动起来了。

你可以把这段修正后的代码替换原来的moveCircles方法，再运行就能看到圆形正常运动，并且碰到画布边缘会反弹啦～

内容的提问来源于stack exchange，提问作者user8468882