这个问题已经在这里有一个答案：

我如何获得一个canvas元素上点击鼠标的坐标？ 22个回答

我有一个HTML文件<canvas>元素，我试图让在鼠标的坐标click事件。我使用此代码：

secondCanvas.addEventListener('click', function(e) {
    console.log(e.pageX)
}, false);

当我点击左上角点我拿到控制台500〜数量，而不是零...什么，我需要做的就是在画布上鼠标的坐标？

Answer 1:

应该通过减去画布元件从事件偏移（偏移计算画布鼠标位置e.pageX和e.pageY ）。
这里有一个链接，介绍如何获取DOM元素的位置，代码应该是这样的：

secondCanvas.addEventListener('click', function(e) {
   var pos = {
       x : e.pageX - canvasOffsetX,
       y : e.pageY - canvasOffsetY
   };
   console.log(pos.x)
}, false);

Answer 2:

这是因为你得到的页面坐标。我猜你想你的两个画布中的任一内当前鼠标的位置？希望这将解决您的问题：

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

另外这款计算器与你相似，并可能给你一个更好的理解：跟踪在画布上鼠标位置时，周围没有元素存在

解决方案用户：lwburk

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

Answer 3:

我用这个代码和它的作品完美的我。一旦添加，帆布鼠标事件有两个新的属性：canvasX和canvasY这是正确映射。你获得的canvas元素之后，不要忘记调用canvas.extendMouseEvents（），你在企业里。

HTMLCanvasElement.prototype.extendMouseEvents = function() {
    this.mapMouseEvent = function(ev) {
        var r = this.getBoundingClientRect();
        ev.canvasX = ev.pageX - r.left;
        ev.canvasY = ev.pageY - r.top;
    };
    this.addEventListener("mousemove", this.mapMouseEvent);
    this.addEventListener("click", this.mapMouseEvent);
    this.addEventListener("contextmenu", this.mapMouseEvent);
    this.addEventListener("dblclick", this.mapMouseEvent);
    this.addEventListener("mousedown", this.mapMouseEvent);
    this.addEventListener("mouseenter", this.mapMouseEvent);
    this.addEventListener("mouseleave", this.mapMouseEvent);
    this.addEventListener("mouseover", this.mapMouseEvent);
    this.addEventListener("mouseout", this.mapMouseEvent);
    this.addEventListener("mouseup", this.mapMouseEvent);
}

文章来源: HTML5 Canvas Mouse coordinates [duplicate]