HTML5 Canvas绘图在每个新点的现有路径上分层新路径。为什么？

Question

这很难解释所以我创建了一个JS小提琴来显示正在发生的事情：http://jsfiddle.net/dGdxS/ - （仅限Webkit）只需将鼠标悬停在画布上绘制 - 您可能需要点击

我注意到画布的性能不符合我的预期，当我设置alpha线时，我想我明白为什么。

看起来我添加到绘图中的每个新点都会在上一行上分层一个全新的线。笔划alpha设置为1％，当绘制较旧的笔划区域时，随着图层的累积，笔划开始变暗。

我认为我做错了什么。在每个新点上绘制之前是否需要清除画布？

Answer 1

因为您从不致电ctx.closePath();，所以每次都会从头开始重绘整个路径。

所以你真的想要类似的东西：

http://jsfiddle.net/dGdxS/7/

Answer 2

HTML5画布使用endPath方法未来，但您可以再次调用context.beginPath()来关闭当前路径并开始新路径。

这与调用context.closePath()相反，后者实际上会在当前路径的开头画一条线，而不是 end 它。如果您要再次绘制，笔将继续从关闭路径的相同点继续绘制。有关更多详细信息和解释，请参阅此优秀related SO answer。