Question

将单击事件处理程序添加到 canvas 元素的最简单方法是返回单击的 x 和 y 坐标（相对于 canvas 元素）？

不需要传统的浏览器兼容性，Safari，Opera 和 Firefox 都可以。

266

181

83

40

Answer 1

如果你喜欢简单但仍然想要跨浏览器功能，我发现这个解决方案最适合我。这是 @ Aldekein 解决方案的简化，但没有 jQuery。

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingRect()
    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)
})

Answer 2

更新（5 / 5 / 16）：应改用patriques' answer，因为它既更简单又更可靠。

由于画布并不总是相对于整个页面进行样式设置，因此canvas.offsetLeft/Top并不总是返回所需的内容。它将返回相对于其 offsetParent 元素偏移的像素数，该元素可以类似于div元素，其中包含应用了position: relative样式的画布。为了解决这个问题，您需要在 Firefox 中对所有offsetParentcan

function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do{
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent)
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

最后一行使获取鼠标相对于 canvas 元素的坐标变得很方便。获取有用坐标所需的只是

coords = canvas.relMouseCoords(event);
canvasX = coords.x;
canvasY = coords.y;

Answer 3

编辑 2018：这个答案很老，它使用检查旧的浏览器，不再需要，因为clientX和clientY属性在所有当前浏览器中工作。

原始答案：
如我当时发现的一篇文章中所述，但不再存在：

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

对我来说很好。

Answer 4

Chrome，IE9 和 Firefox 支持这样的 offsetX / Y，从点击处理程序传递事件。

function getRelativeCoords(event) {
    return { x: event.offsetX, y: event.offsetY };
}

大多数现代浏览器也支持 layerX / Y，但是 Chrome 和 IE 使用 layerX / Y 作为页面上点击的绝对偏移量，包括 margin，padding 等。在 Firefox 中，layerX / Y 和 offsetX / Y 是等效的，但偏移量以前不存在。因此，为了与稍旧的浏览器兼容，您可以使用：

function getRelativeCoords(event) {
    return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}

如何获取鼠标单击画布元素的坐标 (mouse click)

发表评论

评论列表（30条）

如何获取鼠标单击画布元素的坐标 (mouse click)

相关推荐

发表评论

评论列表（30条）