mousedown에서 캔버스를 그리는 방법은 무엇입니까?

Question

캔버스에 점을 추가하기 만하면됩니다.

var canv = document.getElementById("myCanvas"); 
    var context = canv.getContext("2d"); 
    var radius = 5; 

    var putPoint = function(e){ 
     context.beginPath(); 
     context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2); 
     context.fill(); 
    } 

    canv.addEventListener('mousedown', putPoint); 

내가 비디오 자습서와 함께이 작업을 수행하는 방법을 배우는 :

나는 다음과 같은 코드가 있습니다. 그러나 캔버스는 브라우저 창 전체 높이/높이로 으로 설정했지만 내 캔버스는 400px * 400px에 있고 div 내에 포함되어 있습니다. 나는 이것이 문제라고 생각한다.

제 질문은 "e.client"매개 변수가 내 캔버스 때문에 작동하지 않는 것입니다. 창문의 작은 부분이 입니까?

그렇다면 내 캔버스에서 마우스 좌표를 어떻게 추적 할 수 있습니까?

Answer 1

e.clientX/e.clientY는 캔버스 요소의 오프셋으로 조정해야합니다.

그렇지 않으면 마우스의 위치를 ​​잘못 계산하고 있으며 점이 캔버스 경계 외부로 그려져있을 가능성이 있습니다.

다음은 캔버스 오프셋을 고려하여 수정 한 코드입니다.

var putPoint = function(e){ 

    var BB=canvas.getBoundingClientRect(); 
    var offsetX=BB.left; 
    var offsetY=BB.top; 
    var mouseX=e.clientX-BB.left; 
    var mouseY=e.clientY-BB.top; 

    context.beginPath(); 
    context.arc(mouseX,mouseY,radius,0,Math.PI*2); 
    context.fill(); 
}