动画时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;

祝好运！