자바 스크립트에서 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(); 
} 

희망

다음은 작업 데모입니다!