如何获得画布元素上精确的鼠标点击坐标？

确定画布元素上的鼠标点击坐标

检索画布元素内鼠标点击的精确坐标是各种编程应用程序中的常见需求。以下指南为包括 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中文网其他相关文章！