帆布锯齿状边缘的困境与行/招

Question

我有一个画布上绘制线有点问题，

基本上我想要的线路是好的，柔软，半不透明然而画布似乎只想要用最后渲染的线段做这件事。

看看这里，你会看到最后画出的线段很好，而且我也很想看到它），但是随着动画的播放，先前绘制的线条会变得粗糙和讨厌。

我注意到，如果我使用closepath这不然而发生，因为间隔/动画，我不能用这个每个渲染为线，去所有的地方：

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

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

非常感谢 一个

Answer 1

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

首先要清楚，当你制作一条路径时，你可以继续一遍又一遍地敲击它。

所以，如果你有三条线段A，B，C的路径，你做的事：

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

你会得到段描边3次，B抚摸了2次，C抚摸了一次。

这实际上是你在这里做的。

可避免容易被你的路径年底抚摸只有一次：

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

这将停止动画，但说明是什么问题。您可以通过清除屏幕来修复动画。因此，与部分ABC，我们会做：

A，清晰，中风，B，清晰，中风，C，清晰，行程

然后你会得到段A抚摸一次，清屏和然后AB段被抚摸一次，屏幕最后一次被清除，所以ABC段被抚摸一次。这是你想要的。

问题在于清除屏幕意味着清除您之前绘制的所有形状！在这里看到：

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

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

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

要做＃3我们所要做的并不是在每个新零件的开始处调用beginPath。相反，我们只在最开始时只拨打beginPath一次，每个新部分仅仅是一个moveTo操作！

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

这应该是足够的信息，让你在正确的轨道上！