캔버스 요소에서 마우스 클릭 좌표를 어떻게 얻을 수 있습니까?

캔버스 요소에서 마우스 클릭 좌표 가져오기

캔버스 요소에서 마우스 클릭 좌표를 결정하는 것은 다양한 애플리케이션에서 매우 중요합니다. 다음은 Safari, Opera 및 Firefox에서 작동하는 크로스 브라우저 솔루션입니다.

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

이 코드 조각은 getBoundingClientRect() 메서드를 사용하여 문서 내 캔버스 요소의 위치를 ​​가져옵니다. 그런 다음 캔버스 요소의 원점을 기준으로 마우스 클릭의 x 및 y 좌표를 계산합니다.

mousedown 이벤트에 대한 이벤트 리스너를 추가하면 마우스 클릭을 캡처하고 getCursorPosition 함수를 사용하여 좌표를 검색할 수 있습니다. 이 정보는 개체 조작이나 캔버스 요소 내 사용자 상호 작용 등 다양한 목적으로 추가 처리될 수 있습니다.

위 내용은 캔버스 요소에서 마우스 클릭 좌표를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!