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()メソッドはパスを開始するか、現在のパスをリセットします。ここで

は作業DEMOです：

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

を希望このことができます：ここにコードを更新https://jsfiddle.net/f0khrmer/

チェック！