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

希望对您有所帮助！

Javascript 中的 closePath() 有一些问题

I've got some issues with closePath() in Javascript

javascript

styles

stroke