如何获取 Canvas 元素上的鼠标点击坐标？

获取鼠标在画布元素上单击的坐标

确定鼠标在画布元素上单击的坐标对于各种应用程序至关重要。以下是适用于 Safari、Opera 和 Firefox 的跨浏览器解决方案：

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() 方法来获取画布元素在文档中的位置。然后，它计算鼠标单击相对于画布元素原点的 x 和 y 坐标。

通过为 mousedown 事件添加事件侦听器，您可以捕获鼠标单击并使用 getCursorPosition 函数检索坐标。可以出于各种目的进一步处理此信息，例如画布元素内的对象操作或用户交互。

以上是如何获取 Canvas 元素上的鼠标点击坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！