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

【问题标题】：HTML5 Canvas drawing is layering a new path over the existing path at each new point. Why?HTML5 Canvas 绘图在每个新点的现有路径上分层一个新路径。为什么？
【发布时间】：2013-02-16 02:25:45
【问题描述】：

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

我注意到画布的性能不是我所期望的，当我设置线条 alpha 时，我想我明白了原因。

看起来我添加到绘图中的每个新点都在前一行之上叠加了一条全新的线。描边 alpha 设置为 1%，当您绘制较旧的描边区域时，随着图层的增加，该区域开始变暗。

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

【问题讨论】：

标签： html canvas drawing

【解决方案1】：

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

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

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

【讨论】：

这不只是绘制单个非连接线段，而不是实际延长初始线吗？
确实如此。但是，当您只是重复 ctx.lineTo 时，它会扩展当前行，而 ctx.stroke() 会一次又一次地为它着色（这是您的问题所在）。目前我没有看到任何解决方案：/
是的。如果需要，您可以使用原始代码并添加 ctx.clearRect(0,0,500,500); 来扩展初始行，从而在每次鼠标移动之前清除画布。但是，这使得之后的操作变得棘手，因为假设您想要在画布上不止一个笔划，您必须清除画布，重新绘制所有旧的东西，然后每次绘制最新的笔划。这可能会影响性能，并且您有责任记住之前绘制的每个对象。
其实我现在想起来有一些很好的方法可以提高这样一个应用程序的性能。让我知道是否真的如此，我会解释他们。
调用 closePath 不会解决问题。 closePath 只是将当前子路径扩展到它的起点并开始一个新的子路径。仍然会有一条大路继续发展壮大......

【解决方案2】：

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

这与调用context.closePath() 不同，后者实际上会在当前路径的开头画一条线，但不会结束它。如果您要再次绘制，笔将简单地从关闭路径的同一点继续绘制。有关更多详细信息和说明，请参阅此出色的 related SO answer。

【讨论】：