在HTML5画布上移动时跟踪鼠标坐标的简单方法

Question

在HTML5画布上移动鼠标时，是否有一种简单的方法来获取相对鼠标坐标？

我找到了这个：

function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}

但是对我来说似乎太重了。 在使用画布来简化此类操作时，是否有使用框架（例如Kinetic）的原因？

Answer 1

如果您不在画布上使用mousemove ，请使用以下命令：

$(function () { 
canvas = document.getElementById('canvas');
canvas.onmousemove = mousePos;
 });

function mousePos(e) {
    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}

Answer 2

您可以绝对定位画布，然后删除while循环。

最终，如果画布不移动，则可以缓存其偏移量，然后使用缓存的值。

并涵盖所有情况：如果画布具有fixed位置，则无需考虑滚动： pageXOffset ， pageYOffset 。