HTML5 画布鼠标坐标

HTML5 Canvas Mouse coordinates

本文关键字：鼠标 坐标 布鼠标 HTML5      更新时间：2023-09-26

我有一个带有<canvas>元素的HTML文件，我正在尝试在click事件中获取鼠标坐标。我正在使用以下代码：

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

当我点击左上角时，我进入控制台 500~ 数字，而不是零...我需要做什么才能在画布上获取鼠标的坐标？

您应该通过从事件偏移量（ 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);

这是因为您正在获取页面坐标。我猜您想在两个画布中的任何一个中保持当前鼠标位置吗？希望这将解决您的问题：

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

我使用此代码，它非常适合我。添加后，画布鼠标事件具有两个新属性：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);
}
相关文章：