HTML5+JS画布意外线条样式答案

【问题标题】：HTML5+JS canvas unexpected line styleHTML5+JS画布意外线条样式
【发布时间】：2016-10-11 02:59:44
【问题描述】：

根据我以前的经验和在线文档，以下代码应该产生两条垂直线，一条红色，一条绿色。

相反，我得到两条绿线或我最后设置的strokeStyle。

我看不出这段代码哪里错了。此外，可能是我的浏览器搞砸了。

<html>
  <body>
    <canvas></canvas>
    <script>

      var cvs = document.getElementsByTagName("canvas")[0];
      var ctx = cvs.getContext("2d");

      ctx.strokeStyle = "#ff0000";
      ctx.moveTo(1, 0);
      ctx.lineTo(1, 10);
      ctx.stroke();

      ctx.strokeStyle = "#00ff00";
      ctx.moveTo(11, 0);
      ctx.lineTo(11, 10);
      ctx.stroke();

    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

在您开始新行时使用ctx.beginPath()（这将隐式关闭您之前的路径）。

jsFiddle.

【讨论】：

感谢你们，这解决了问题。我接受了 dougajmcdonald 的回答，因为他更快并发送了文档链接。但是您的回答效果很好。如果可以，我会同时接受。
@pid 没关系，但他实际上并没有更快（查看时间戳）。
你最后一句话不正确。 beginPath 不会关闭之前的路径，只有 closePath 会。但是是的，如果您打算绘制多条路径，则需要 beginPath。

【解决方案2】：

您需要在第一行之后和第二行之前致电closePath()。

请注意，它将返回您的起点。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath

编辑：

我假设两条路径都已开始，因为 OP 将线条描述为相同颜色而不是根本不绘制。

有趣的是，在一个小型本地测试中，线条确实没有任何开始路径，但第一条线用预期的第二条路径的颜色绘制了两次。

正确答案是beginPath()和closePath()每次如下图：

  ctx.beginPath();
  ctx.strokeStyle = "#ff0000";
  ctx.moveTo(1, 0);
  ctx.lineTo(1, 10);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.strokeStyle = "#00ff00";
  ctx.moveTo(11, 0);
  ctx.lineTo(11, 10);
  ctx.stroke();
  ctx.closePath();

【讨论】：

如果您打算绘制多条路径，您将需要一个 beginPath。