DEV

HTML5 - Canvas マウスイベント時の座標取得について（座標は小数点以下があるらしい）

#Canvas#Event#HTML5#Javascript

こんな感じでマウスクリック時の座標を検知する。

var mouseX;
var mouseY;


//イベントリスナーの登録
canvas.addEventListener("mousedown", mouseDownHandler, false);


function mouseDownHandler(e) {
 var rect = e.target.getBoundingClientRect();
 mouseX =  Math.floor(e.clientX - rect.left);
 mouseY =  Math.floor(e.clientY - rect.top);
}

Math.floor(x)は、xの小数点以下を切り捨てる関数ですが、これをつけないと、FirefoxでY軸が小数点付き座標が取得されて困ったのでつけました。