画布:在绘制圆形图时,如何避免线段之间的间隙？

Question

我正在尝试为正在绘制的圆圈制作动画 - 这是我正在做的简化版本:

http://jsfiddle.net/DQz37/1/

问题是:我在每个线段之间得到轻微的线条/失真.像这样:

我正在处理的限制是:

• 我需要在同一个画布上渲染多个圆圈,有时圆圈重叠
• 我需要使用透明度/ rgba着色来渲染圆圈
• 我需要为圆圈的渲染设置动画(所以它们看起来像是在绘制)

这是一个常见的问题吗？你怎么处理这种事情？

Answer 1

解决这个问题的一个简单方法是始终绘制一条路径,这样就可以保证它们连接良好.

因此,不是从A到B,然后B到C,然后从C到D,从A到B,清除画布,从A到C的弧,清除画布,从A到D的弧等等.

这是一个修改后的代码位作为示例:

http://jsfiddle.net/ZV7rv/

编辑:响应注释,这是如何在使用画布缓冲区保持与之前的画布相同的状态时实现相同的操作:

http://jsfiddle.net/7vVBC/