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

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

캔버스 요소를 기준으로 마우스 클릭의 x 및 y 좌표를 얻으려면 다음을 따르세요. 다음 단계를 따르세요.

1. 이벤트 정의 핸들러:

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

2. 커서 위치 계산:
   이벤트 핸들러 내에서 getBoundingClientRect() 메서드를 사용하여 캔버스의 상대 위치를 가져옵니다. 화면에서 클릭 이벤트 좌표를 빼서 상대 좌표를 찾습니다. position:

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

3. Log Coordinates:
   마지막으로 좌표 값을 콘솔에 출력하거나 응용 프로그램:

   console.log("x: " + x + " y: " + y)

예:

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

이 솔루션은 Safari, Opera 및 Firefox에 대한 브라우저 간 호환성을 제공합니다. 레거시 브라우저 지원을 위해서는 jQuery 또는 크로스 브라우저 라이브러리 사용을 고려해보세요.

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