HTML5 + JS canvas意外的线条样式

正如我从在线经验和文档中获得的，以下代码应该会生成两条垂直线条，一条红色，另一条绿色。HTML5 + JS canvas意外的线条样式

取而代之，我得到了两条绿线或最后我设定的strokeStyle。

我看不到这段代码是错的。此外，它可能是我的浏览器，以某种方式让事情变得困难。

的JS Fiddle和代码：

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

来源

2016-06-10 pid

您需要在第一行之后和第二行之前拨打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();

来源

2016-06-10 08:17:29 dougajmcdonald

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