Простой способ отслеживать координаты мыши при перемещении по холсту 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) при работе с canvas для упрощения таких вещей?

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.