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

javascript canvas

2022-08-29 23:58:17

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

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

答案 1

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

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

答案 2

更新（2016年5月5日）：应该使用patriques的答案，因为它既简单又可靠。

由于画布并不总是相对于整个页面设置样式，因此并不总是返回您需要的内容。它将返回相对于其 offset Parent 元素偏移的像素数，该元素可以是类似于包含应用了样式的画布的元素。要解决这个问题，你需要循环通过s链，从canvas元素本身开始。这段代码非常适合我，在Firefox和Safari中进行了测试，但应该适用于所有人。canvas.offsetLeft/Topdivposition: relativeoffsetParent

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;

最后一行便于获取相对于画布元素的鼠标坐标。获得有用的坐标所需要的只是

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