用畫布提供的圓形不能正確刷新，小提琴提供

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