Question

从我以前的在线经验和文档中可以看出，以下代码应该生成两条垂直线，一条是红色，另一条是绿色。

相反，我得到两条绿线或者我最后设置的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>

Answer 1

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

jsFiddle

Answer 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();

HTML5 + JS画布意想不到的线条风格

2 个答案: