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