javascript - 圆圈无法使用 Canvas 正确刷新，提供了 fiddle

Question

我正在使用 javascript canvas 来制作一些形状的动画。目前的刷新率为 60 fps。

对矩形进行动画处理效果很好，以下是我绘制它们的方法:

this.ctx.fillStyle = shape.colour;
this.ctx.fillRect(shape.x, shape.y, shape.width, shape.height);

这就是我创建圆圈的方式:

this.ctx.fillStyle = shape.colour;
this.ctx.arc(shape.x,shape.y,shape.radius,0,Math.PI*2);
this.ctx.fill();

基本上，我的形状从屏幕的顶部移动到底部，矩形向下移动得很好，但圆圈似乎没有刷新。

下面的图像显示了这一点，矩形向下移动了一半，圆圈向下移动，但“旧圆圈”没有被删除:

如果需要，我会尝试创建一个 JSFiddle 显示确切的问题，但也许有人知道没有它会发生什么:)

设法把 fiddle 放在一起以显示确切的问题:https://jsfiddle.net/reko91/suuwe4wc/5/

Answer 1

如果您直接使用填充或描边函数来处理诸如 ctx.fillRect 或 ctx.StrokeText 之类的内容，2D 渲染器将为此创建一个新路径。所有其他涉及形状的渲染函数都将添加到当前路径。

如果你处于循环中并且你刚刚

ctx.arc(100,100,10,0,Math.PI*2);
ctx.stroke();

每次代码循环时，您都会添加到当前路径。在大多数情况下，这最终看起来就像您留下了痕迹。

要解决此问题，您需要使用 ctx.beginPath() 来启动新路径。

ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.stroke();

解决问题