캔버스 요소에서 정확한 마우스 클릭 좌표를 얻으려면 어떻게 해야 합니까?

캔버스 요소에서 마우스 클릭 좌표 결정

캔버스 요소 내에서 마우스 클릭의 정확한 좌표를 검색하는 것은 다양한 프로그래밍 애플리케이션에서 일반적으로 필요합니다. . 다음 가이드는 Safari, Opera 및 Firefox를 포함한 웹 브라우저에 대한 간단한 접근 방식을 제공합니다.

크로스 브라우저 솔루션

간단한 크로스 브라우저 솔루션을 얻으려면, getCursorPosition이라는 JavaScript 함수를 정의할 수 있습니다.

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);
});

마우스 클릭이 감지되면 getCursorPosition 함수가 호출되고 클릭의 x 및 y 좌표가 콘솔.

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