使用Canvas，提供小提琴时，圆圈不能正常刷新

Question

我正在使用javascript画布来动画一些形状。它目前的刷新率为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，但也许有人知道没有它会发生什么：）

管理得到一个小提琴，以显示确切的问题：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();

将解决问题

Answer 2

工作代码：https://jsfiddle.net/suuwe4wc/7/

您只需添加ctx.beginPath();：

ctx.fillStyle = grd; //fill with gradient above ctx.fillRect(0, 0, WIDTH, HEIGHT); ctx.beginPath(); ctx.save();