HTML5+JS 画布意外的线条样式

正如我从以前的经验和在线文档中得到的那样，下面的代码应该产生两条垂直线，一条红色，另一条绿色。

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

我看不出这段代码哪里错了。此外，可能是我的浏览器以某种方式使事情变得混乱。

JS小提琴和代码：

<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>

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

jsFiddle。

您需要在

第一行之后和第二行之前调用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();

相关内容

最新更新

热门标签：