我在Javascript中使用closePath（）時遇到了一些問題

Question

我必須在中間拉一條水平的紅色和垂直的綠色線。我可以爲每個單獨做，但是兩條線都是綠色的。誰能告訴我爲什麼？

var c= document.getElementById('myCanvas').getContext('2d'); 

//c.fillRect(20,10,250,175);// 

var cw= 450; 
var ch= 300; 

c.moveTo(0,(ch/2)); 
c.lineTo(450,(ch/2)); 
c.strokeStyle= '#db0000'; 
c.stroke(); 



c.moveTo((cw/2),0); 
c.lineTo((cw/2),cw); 
c.closePath(); 
c.strokeStyle= '#3ac214'; 
c.stroke(); 

Answer 1

你應該使用beginPath()方法來獲得正確的顏色。方法beginPath()開始一個路徑，或重置當前路徑。

這裏的工作演示：https://jsfiddle.net/f0khrmer/

檢查更新的代碼在這裏：

function drawCanvas(){ 
    var c= document.getElementById('myCanvas').getContext('2d'); 

    var cw= 450; 
    var ch= 300; 

    c.beginPath(); 
    c.moveTo(0,(ch/2)); 
    c.lineTo(450,(ch/2)); 
    c.strokeStyle= '#db0000'; 
    c.stroke(); 


    c.beginPath(); 
    c.moveTo((cw/2),0); 
    c.lineTo((cw/2),cw); 
    c.closePath(); 
    c.strokeStyle= '#3ac214'; 
    c.stroke(); 
} 

希望這有助於！