У меня есть некоторые проблемы с closePath() в Javascript

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

Надеется, что это помогает!