如何取得 Canvas 元素上的滑鼠點擊座標？

取得畫布元素上的滑鼠點選座標

要取得滑鼠點選相對於畫布元素的 x 和 y座標，請執行以下操作這些步驟：

1. 定義事件處理程序：

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

2. 
   

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

3. 
   

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

計算遊標位置：在事件處理程序中，使用getBoundingClientRect()方法取得畫布的相對位置到螢幕上，然後從中減去點擊事件座標以找到相對值位置：記錄座標：記錄座標：最後，您可以將座標值輸出到控制台或在您的程式中使用它們應用程式：範例：範例： 此解為Safari、Opera 和 Firefox 提供跨瀏覽器相容性。對於舊版瀏覽器支持，請考慮使用 jQuery 或跨瀏覽器庫。

以上是如何取得 Canvas 元素上的滑鼠點擊座標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！