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

をしかし、それは私には重すぎるようです。このようなことを単純化するためにキャンバスを扱うときにフレームワーク（キネティックのような）を使う理由はありますか？

Answer 1

キャンバスを絶対配置してからwhileループを削除することができます。

最終的に、キャンバスが移動しない場合は、オフセットしてキャッシングされた値を使用できます。

キャンバスにfixedの位置がある場合は、pageXOffset,pageYOffsetのスクロールを考慮する必要はありません。

Answer 2

はあなたのキャンバスの使用上のごmousemoveを使用していない場合Apple

Answer 3

が提供する基本的な例についてはこちらを参照してくださいこの：

$(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; 
    } 
}