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

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

要捕获鼠标在画布元素上单击的坐标，请按照以下步骤操作：

获取画布元素

使用 DOM 选择器定位并访问画布元素。

添加事件监听器

将事件监听器附加到画布监听鼠标点击。

处理事件

在事件处理程序中，使用 getBoundingClientRect() 方法检索画布元素在屏幕上的位置。

计算坐标

画布位置减去点击的客户端坐标，即可得到画布内的相对坐标canvas.

示例代码：

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

此解决方案既简单又跨浏览器兼容，确保它在 Safari、Opera 和 Firefox 中有效工作。

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