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

希望这有助于！