如何取得 Canvas 元素上的滑鼠點擊座標？-js教程-PHP中文網

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

Susan Sarandon

發布： 2024-12-08 01:37:11

原創

436 人瀏覽過

How Do I Get Mouse Click Coordinates on a Canvas Element?

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

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

定義事件處理程序：

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

登入後複製

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

登入後複製

```
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中文網其他相關文章！