javascript - Canvas 锯齿状边缘与线条/笔划的问题

Question

我在 Canvas 上绘制线条时遇到了一些问题，

基本上，我希望线条漂亮、柔软且半透明，但 Canvas 似乎只想对最后渲染的线段执行此操作。

看看这里，您会发现最后绘制的线段很好，而且..这是我想要的)但是随着动画播放，之前绘制的线条变得锯齿状且令人讨厌。

我注意到，如果我使用 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. 将当前正在绘制的对象保存在临时 Canvas 上(可能很棘手)
2. 将之前绘制的状态保存到临时 Canvas (不那么棘手)
3. 跟踪这三条路径，就好像它们是一条路径一样(很简单，所以我会为您做这件事)

要做#3，我们要做的就是不要在每个新部分的开始处调用 beginPath 。相反，我们只在开始时调用 beginPath 一次，并且每个新部分只是一个 moveTo 操作!

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

这应该足以让您走上正轨!