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

Question

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

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

问题是：我在每个线段之间得到轻微的线条/扭曲。像这样：

我正在处理的限制是：

• 我需要在同一个画布上渲染多个圆圈，有时圆圈重叠
• 我需要使用transparency / 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，并重叠一段以确保您没有因抗锯齿而占用空格。