Jquery로 캔버스에 여러 줄을 동시에 그릴 때 클릭/드래그

Question

사용자가 클릭하고 캔버스 요소에 직각 삼각형을 그리는 데 관심이 있습니다. 그러나 drawLine 함수를 두 번째로 호출하면 첫 번째 항목이 삭제됩니다. 예제 다이어그램은 여기에 있습니다 : right_triangle_draw 무엇을 제공합니까?

$("canvas").mousedown(function(event) { 
     var totalOffsetX = 0; 
     var totalOffsetY = 0; 
     var canvasX = 0; 
     var canvasY = 0; 
     var currentElement = this; 

     do { 
      totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; 
      totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; 
     } 
     while (currentElement = currentElement.offsetParent) 

     startX = event.pageX - totalOffsetX; 
     startY = event.pageY - totalOffsetY; 

     $(this).bind('mousemove', function(e) { 
      var xdiff = Math.abs(startX - e.pageX + totalOffsetX); 
      var ydiff = Math.abs(startY - e.pageY + totalOffsetY); 

      drawLine(startX, startY, e.pageX - totalOffsetX, e.pageY - totalOffsetY, direction); 

      drawLine(startX, startY, e.pageX - totalOffsetX, startY, direction); 

     }); 
    }).mouseup(function() { 
     $(this).unbind('mousemove'); 
    }); 



    function drawLine(x, y, stopX, stopY, direction) { 
      ctx.strokeStyle = 'rgba(0,155,205,0.8)'; 
      ctx.lineWidth = 3; 
      ctx.clearRect(0, 0, can.width, can.height); 
      ctx.beginPath(); 
      ctx.moveTo(x, y); 
      ctx.lineTo(stopX, stopY); 
      ctx.closePath(); 
      ctx.stroke(); 

Answer 1

선을 그릴 때마다 캔버스가 지워집니다. ctx.clearRect (0, 0, can.width, can.height)를 사용해보십시오; drawLine이 호출되기 전에 mouseMove 함수에서 drawLine에서 제거하십시오.