帆布锯齿状边缘与线条/笔划的困境

Question

我在画布上绘制的线条有点问题，

基本上我希望线条漂亮，柔软且半透明，但画布似乎只想用最后渲染的线段做到这一点。

看看这里，你会看到画出的最后一个线段很好，而且......我想要它怎么样）但是当动画播放时，之前绘制的线条会变得粗糙和讨厌。

我注意到，如果我使用closepath，但这不会发生，因为间隔/动画我不能使用这个每个渲染，因为线遍布整个地方：

http://jsfiddle.net/xSPuM/1/

任何人对如何阻止这种情况有任何想法，我将非常感激。

非常感谢 甲

Answer 1

奇怪的代码！虽然这样做的方式看起来有点独特，但动画很整洁，所以让我们一起来看看。

首先，要完全清楚，当你走一条路时，你可以一遍又一遍地抚摸它。

因此，如果您有一个包含三个线段A，B，C的路径，那么您可以：

A，中风，B，中风，C，中风

你会得到A段抚摸3次，B抚摸2次，C抚摸一次。

这基本上就是你在这里所做的。

您可以通过在路径末尾只抚摸一次来轻松避免这种情况：

http://jsfiddle.net/xSPuM/5/

这会停止动画但会说明问题所在。您可以通过清除屏幕来修复动画。因此，对于我们将要做的细分ABC：

A，清除，中风，B，清除，中风，C，清除，中风

然后你会得到一个A段被抚摸，屏幕被清除，然后A-B段被描边一次，屏幕被最后一次清除，所以A-B-C段被描边一次。这就是你想要的。

问题在于清除屏幕意味着清除以前绘制的所有形状！见这里：

http://jsfiddle.net/xSPuM/7/

有几种方法可以解决这个问题：

1. 将当前正在绘制的对象保存在临时画布上（可能很棘手）
2. 将先前绘制的状态保存到临时画布（不那么棘手）
3. 跟踪三条路径，好像它们是一条路（很容易，所以我会为你做的）

要完成＃3，我们要做的就是不要在每个新部件的开头调用beginPath。相反，我们只在一开始就调用beginPath一次，而每个新部分只是一个moveTo操作！

http://jsfiddle.net/xSPuM/8/

这应该足以让你走上正确的轨道！