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

希望这会有所帮助！