캔버스 선 바꾸기, 또는 두 점 사이의 선 조절하기

Question

캔버스에 그려진 선을 바꿀 수 있습니까? 업데이트되는 마우스 이동 postX 및 postY 변경 위치와 경로로, 나중에 그런

ctx.beginPath(); 
    ctx.lineWidth="2"; 
    ctx.strokeStyle="rgba(42, 155, 128, 0.9)"; 
    ctx.moveTo(linkX,linkY); 
    ctx.lineTo(postX,postY); 
    ctx.stroke(); 

: 그래서, 경우 선으로 그려집니다. 마우스를 가져 가면 움직이는 두 점 사이에 선을 그려 봅니다.

지금까지 lineTo 위치를 업데이트하려는 3 개의 선을 그렸지만이를 선택할 방법이 없습니다. 이것이 단지 CSS 일 경우

$link.on('mousemove', function(e){ 
    $post.css({ 
     left: mouse.x, 
     top: mouse.y 
    }); 
}); 

캔버스 요소로 어떻게 할 수 있습니까?

감사합니다.

Answer 1

캔버스가 똑똑하지 않습니다. 그것은 당신의 선을 대상으로 기억하지 못할 것입니다. 어쨌든 선을 그린다면 캔버스가 그것을 잊어 버릴 것이다. 캔버스에 그린 모양 (선)의 좌표를 추적해야합니다. 그리고 나서 기존 라인을 지우고 새로운 위치로 다시 그려서 선의 느낌을 만드십시오.

Answer 2

그리기 파트를 mousemove 이벤트의 일부로 추가하면 작동합니다. 그것이 heyho 그것을하는 가장 좋은 방법인지 확실하지 않습니다.

$link.on('mousemove', function(e){ 
     ctx.beginPath(); 
     ctx.lineWidth="2"; 
     ctx.strokeStyle="rgba(42, 155, 128, 0.9)"; 
     ctx.moveTo(linkX,linkY); 
     ctx.lineTo(postX,postY); 
     ctx.stroke(); 
    });