HTML5 캔버스에서 마우스 클릭 좌표를 어떻게 얻나요?

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

캔버스 요소에서 마우스 클릭 좌표를 캡처하려면 다음 단계를 따르세요.

캔버스 획득 요소

DOM 선택기를 사용하여 캔버스 요소를 찾고 액세스합니다.

이벤트 리스너 추가

이벤트 리스너를 캔버스에 연결하여 마우스 클릭을 듣습니다.

이벤트

이벤트 핸들러 내에서 getBoundingClientRect() 메서드를 사용하여 화면에서 캔버스 요소의 위치를 ​​검색합니다.

좌표 계산

캔버스 위치에서 클릭의 클라이언트 좌표를 빼서 캔버스 내의 상대 좌표를 얻습니다. canvas.

예제 코드:

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

이 솔루션은 간단하고 브라우저 간 호환되므로 Safari, Opera 및 Firefox에서 효과적으로 작동합니다.

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