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

캔버스 요소에서 마우스 클릭 좌표 검색

이 질문은 캔버스 요소를 기준으로 마우스 클릭의 정확한 좌표를 얻는 것과 관련이 있습니다. Safari, Opera 및 Firefox와 같은 최신 브라우저의 경우 jQuery가 필요 없는 효율적인 솔루션이 있습니다.

제공된 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);
});

이것은 코드는 getBoundingClientRect() 메서드를 활용하고 상대 x 및 y 좌표를 계산하여 마우스 클릭 위치를 효율적으로 캡처합니다. console.log() 호출은 이러한 좌표를 표시하여 캔버스 요소 내 클릭 위치를 명확하게 표시합니다.

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