캔버스 요소에서 마우스 클릭 좌표 검색
이 질문은 캔버스 요소를 기준으로 마우스 클릭의 정확한 좌표를 얻는 것과 관련이 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
