Logicky BLOG

Logickyの開発ブログです

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky

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

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

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軸が小数点付き座標が取得されて困ったのでつけました。

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky