用画布提供的圆形不能正确刷新，小提琴提供

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();