動畫時HTML5 Canvas圖像不穩定

Question

在畫布上為動畫設置動畫時，如果還有其他圖層，則圖形會變得不連貫，請參見小提琴（單擊“運行”以查看動畫）： http : //jsfiddle.net/Q97Wn/

如果我更改此行：

opts.percentageIndicator.clearRect(0, 0, opts.percentageIndicator.width, opts.percentageIndicator.height);

至：

opts.percentageIndicator.clearRect(0, 0, opts.canvas.width, opts.canvas.height);

然后，一切將順利進行，只不過這將完全刪除另一層。

我可以通過將兩者都放在一個畫布中來解決此問題，但是我希望能夠避免這種結構目的。 有什么建議么？

Answer 1

首先，canvas.getContext（）不會生成新的上下文，它會返回已經存在的實例，因此如下所示：

opts.centerCircle = opts.canvas.getContext('2d');
// ...
opts.percentageIndicator = opts.canvas.getContext('2d');

會是同樣的意思。

因此，我建議您這樣做：

http://jsfiddle.net/Volter9/Q97Wn/2/

我所做的只是將兩個上下文都更改為一個屬性，並在添加了渲染基數之后：

opts.ctx.strokeStyle = opts.indicatorColor;

祝好運！