如何獲得畫布元素上精確的滑鼠點擊座標？

確定畫布元素上的滑鼠點擊座標

檢索畫布元素內滑鼠點擊的精確座標是各種程式應用程式中的常見需求。以下指南為包括 Safari、Opera 和 Firefox 在內的 Web 瀏覽器提供了一個簡單的方法。

跨瀏覽器解決方案

要實作簡單的跨瀏覽器解決方案，可以定義一個名為getCursorPosition 的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);
}

此函數計算相對於canvas 元素本身。

事件處理

要將此功能附加到canvas 元素，請為滑鼠按下事件新增事件偵聽器：

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

一旦偵測到滑鼠點擊，就會呼叫getCursorPosition 函數，並將點擊的x 和y 座標記錄到控制台。

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