如何获得鼠标单击画布元素的坐标？

Question

如何获得鼠标单击画布元素的坐标？将Click事件处理程序添加到画布元素以返回单击的x和y坐标(相对于画布元素)的最简单方法是什么？不需要传统浏览器兼容性，Safari、Opera和Firefox就行了。

Answer 1

正如我在当时发现的一篇文章中所描述的，但现在已经不存在了：

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 2

由于画布的样式并不总是相对于整个页面的样式，所以canvas.offsetLeft/Top并不总是把你需要的东西还回去。它将返回相对于其offsetParent元素偏移的像素数，该元素可以类似于div元素，其中包含带有position: relative风格适用。要解释这一点，您需要遍历offsetParents，从画布元素本身开始。这段代码在Firefox和Safari中测试过，非常适合我，但应该适用于所有人。

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;