Canvas：绘制圆形动画时，如何避免线段之间的间隙？

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/

Answer 2

基本上，您想要组合两条路径并将它们完美地连接起来，没有任何接缝，但这不会奏效，或者如果您真的很幸运并且它可以在一个浏览器中运行，那么它可能无法在另一个浏览器中运行。这是因为抗锯齿算法的实现并不完全相同，甚至可能经过硬件加速并传递给显卡。

提示：it's not possible to disable antialiasing.

作为一名程序员，你不断地遇到各种不容易做或不方便的问题，这时你需要退后一步，重新评估你的选择。这是其中之一。

在您指定的约束中，您唯一的选择是重绘每一帧上的所有内容，或者不使用 alpha，并稍微重叠段以确保您没有因为抗锯齿而有空格。