내가 클릭하는 점의 좌표를 가져 오는 방법은 무엇입니까?

Question

나는 <canvas> 태그로 재생 단지 문제가 발생하고있다 :

https://jsfiddle.net/awguo/6yLqa5hz/

가 나는 캔버스를 클릭하면 지점의 좌표를 얻으려면.

잠시 동안 검색 한 결과 몇 가지 기능이 있지만 300x300 캔버스의 경우 오른쪽 하단 점의 점은 (300,150)입니다. 300,300이 아니어야합니다 (img가 300x300이고 캔버스가 100 %이기 때문에).

왜?

300x300을 얻으려면 어떻게해야합니까?

Answer 1

이벤트 처리기에서 반환 한 event.clientX 및 event.clientY 좌표는 캔버스 요소와 창의 오프셋으로 조정해야합니다. 이를 위해 canvas.getBoundingClientRect을 사용하여 left & top 캔버스 오프셋을 얻을 수 있습니다. resize & scroll 이벤트를 수신하십시오. 이러한 이벤트가 발생하면 캔버스의 현재 오프셋을 다시 가져와야합니다. 여기

// Fetch offsetX & offsetY variables that contain the 
// canvas offset versus the window 
// Re-fetch when the window is resized or scrolled 
function reOffset(){ 
    var BB=canvas.getBoundingClientRect(); 
    offsetX=BB.left; 
    offsetY=BB.top;   
} 
var offsetX,offsetY; 
reOffset(); 
window.onscroll=function(e){ reOffset(); } 
window.onresize=function(e){ reOffset(); } 

에서는 이벤트 핸들러에서 정확한 마우스 좌표를 계산하기 위해 오프셋을 사용할 수있다 :

function handleMouseDown(e){ 

    // tell the browser we're handling this event 
    e.preventDefault(); 
    e.stopPropagation(); 

    // calculate the mouse position 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 

    // your stuff 
} 

Answer 2

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
    x: evt.clientX, 
    y: evt.clientY 
    }; 
} 

충분합니다. 300px가 아닌 350px 크기의 이미지입니다.