Javascript 画布动画将继续重画以前的帧

我认为这是一个不健康的时间量，现在，我没有找到任何注意到这个错误。我开始用JavaScript构建一个简单的HTML画布动画。目前，我预计小正方形会移动。下面是代码（我也在使用babeljs）：

classpod{
构造函数（x，y）{
this.posX=x；
this.posY=y；
this.velX=getRandomNumber（-5,5）；
this.velY=getRandomNumber（-5,5）；
}
getPos（）{
返回（[this.posX，this.posY]）；
}
移动（）{
this.posX+=this.velX；
this.posY+=this.velY；
}
render（）{
ctx.save（）；
ctx.rect（this.posX，this.posY，3,3）；
ctx.fillStyle=“#ffffff”；
ctx.fill（）；
ctx.restore（）；
}
}
/*课程到此结束*/
var canvas=document.getElementById（'canvas'）
var ctx=canvas.getContext（'2d'）；
var elementsNum=10；
常量堆栈=新数组（elementsNum）；
对于（变量i=0；i

运行函数run（）的一个周期后，将渲染小正方形（我称之为Pods）。下一个循环从用ctx.clearRect清除画布开始。。。我正在重置上下文并开始移动，然后从堆栈中绘制吊舱。当我绘制第一个Pod时，它将绘制所有Pod以及上一帧

以下是此特定脚本的代码笔：

（我故意对requestAnimationFrame进行了注释，因此需要使用控制台调用run（）函数）

感谢您的帮助。

这将解决您的问题：

render() {    

ctx.beginPath();
ctx.rect(this.posX,this.posY,3,3);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();

}

使用canvas，您需要使用

beginPath

和

closePath

方法通过代码识别各个形状。在某些方法中，这是天生的，比如在

fillRect

中。因此，上述代码可以进一步简化为：

render() {    
ctx.fillStyle = "#ffffff";
ctx.fillRect(this.posX,this.posY,3,3);  
}

当您刚刚声明一个形状（

rect

）时，您需要指定路径开始的时间和关闭的时间，否则很可能会导致像原始代码中的形状出血这样的问题

---

另外，作为提示，您不需要保存状态

.save（）

/

.restore（）

，除非您正在转换/缩放/旋转/或移动画布元素。填充形状不适用

为什么

ctx=canvas.getContext（'2d'）在运行时，你已经有了它？老实说，我在另一支笔上找到了它，当时我试图解决这个错误。然而，这并没有改变任何事情。请随意移除。谢谢，这解决了我的问题。我读过的每一篇文档中，他们都没有提到这对于rect形状是必要的。不知怎的，他们总是用曲线或类似的形状来解释。再次感谢您的帮助@ErikPutz没问题！closePath对于rect是无用的，它只是到最后一个子路径的第一个点的一条线。
render() {    
ctx.fillStyle = "#ffffff";
ctx.fillRect(this.posX,this.posY,3,3);  
}