我必须在中间拉一条水平的红线和一条垂直的绿线。我可以分别对每个行进行处理，但是两行都将变为绿色。谁能告诉我为什么？
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();
您应该使用该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();
}
希望这可以帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句