获取鼠标在画布元素上单击的坐标
确定鼠标在画布元素上单击的坐标对于各种应用程序至关重要。以下是适用于 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中文网其他相关文章！
