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

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

要获取鼠标单击相对于画布元素的 x 和 y 坐标，请执行以下操作这些步骤：

1. 定义事件处理程序：

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

   登录后复制

2. 计算光标位置：
   在事件处理程序中，使用 getBoundingClientRect() 方法获取画布的相对位置到屏幕上，然后从中减去点击事件坐标以找到相对值位置：

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

   登录后复制

3. 记录坐标：
   最后，您可以将坐标值输出到控制台或在您的程序中使用它们应用程序：

   console.log("x: " + x + " y: " + y)

   登录后复制

示例：

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)
})

此解决方案为 Safari、Opera 和 Firefox 提供跨浏览器兼容性。对于旧版浏览器支持，请考虑使用 jQuery 或跨浏览器库。

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