在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 。