캔버스 for line, lineTo() and closePath()

Question

플로팅 된 비뚤어진 이미지 캔버스 드로잉을 만들기 위해 for 루프를 만들어야합니다. 첫 번째 드로잉은 괜찮지 만 다른 드로잉은 오래된 드로잉이 끝나는 곳에서부터 시작됩니다. 이전 좌표를 지우려면 clearPath()를 사용하고 있지만 작동하지 않습니다.

function draw(){ 
    var ctx = $('#canvas')[0].getContext('2d'); 
    var $width = $('#canvas').parent().width(); 
    var $canvas_width = 380; 
    var $canvas_margin = 15; 
    var $canvas_height = 810; 

    var $total_draw = $width/Math.ceil($canvas_width); 
    var $start = 0; 


    for(var $i = 1; $i <= 2; $i++){ 
     ctx.beginPath(); 
     ctx.moveTo($start,0); 
     ctx.lineTo($canvas_width,0); 
     ctx.lineTo($start,$canvas_height); 
     ctx.lineTo(Math.abs($canvas_width) * -1,$canvas_height); 
     ctx.lineTo($start,0); 
     ctx.stroke(); 
     ctx.closePath(); 


     $start += ($canvas_width + $canvas_margin); 
    }  
} 

편집

좋아 내 실수 :

여기 내 코드입니다. 나는 계산상의 실수를 저질렀다. 약간의 통제 시간 후에, 나는 계산을 정정했다.

이 샘플은 작동합니다. 당신이 ctx.lineTo($start,0);을 할 필요가 없습니다

function draw(){ 
    var ctx = $('#canvas')[0].getContext('2d'); 
    var $width = $('#canvas').parent().width(); 
    var $canvas_width = 380; 
    var $canvas_margin = 20; 
    var $canvas_height = 810; 

    var $total_draw = $width/Math.ceil($canvas_width); 
    var $start = 0; 

    for(var i = 1; i <= $total_draw + 1; i++){ 
     ctx.beginPath(); 
     ctx.moveTo($start,0); 
     ctx.lineTo($start + $canvas_width,0); 
     ctx.lineTo($start, $canvas_height); 
     ctx.lineTo(-380 + $start, $canvas_height); 
     ctx.lineTo($start,0); 
     ctx.stroke(); 
     ctx.closePath(); 

     $start = $start + ($canvas_width + $canvas_margin); 
    } 
} 

Answer 1

closePath은 ctx.stroke(); 이전 ctx.closePath();을 넣고, 첫 번째로 마지막 포인트를 줄 만합니다.

또한 캔버스에서 모든 것이 괜찮다고 생각합니다. (beginPath은 새 점의 마지막 점을 지정하지 않으며 맨 위에는 이동하지 않고 현재 점을 이동하는 moveTo를 사용합니다.)하지만 코드는 아닙니다. 나는 당신이 무엇을하려고하는지 모른다. (어쩌면 당신이 그것을 설명해야 하는가?) 그러나 꼭대기에있는 지점부터 시작해서 오른쪽 위 모서리에 선이 그려진다. (그래서 모든 첫줄들이 겹쳐 질 것이다.)

Answer 2

for 루프 conxtext.restore() 끝에 시작할 때 context.save()을 사용할 수 있습니다. 이렇게하면이 두 호출 사이에 적용된 위치는 현재 렌더링에만 영향을 미칩니다.