[JavaScript] HTML Canvas でのマウスポインタの位置を取得する - HTML Canvas でのマウスポインタの移動の検出

このページのタグ:[JavaScript] [HTML] [HTML Canvas]
キャンバスでのマウスポインタの位置を取得するコードを紹介します。

プログラム

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

  <script type="text/javascript">

    function PrintPosition(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '12pt "MSゴシック"';
        context.fillStyle = 'black';
        context.fillText(message, 32, 48);
    }

      function getMousePosition(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

      function draw() {
        var canvas = document.getElementById('SimpleCanvas');
        var context = canvas.getContext('2d');

        canvas.addEventListener('mousemove', function (evt) {
          var mousePos = getMousePosition(canvas, evt);
          var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
          PrintPosition(canvas, message);
        }, false);
      }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>

解説

キャンバスでのマウスの移動を検出するには、キャンバスオブジェクトのaddEventListenerメソッドを呼び出し、'mousemove'イベントにイベントハンドラを追加します。


function (evt) {
  var mousePos = getMousePosition(canvas, evt);
  var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
  PrintPosition(canvas, message);
}
イベントハンドラ内では、getMousePosition関数を呼び出し、マウスポインタの位置を取得します。'mousemove'イベントのイベントハンドラの引数のclientX , clientYでマウスポインタの座標を取得できます。mousemoveイベントでのマウスポインタの座標取得の詳細はこちらを参照してください。


  function getMousePosition(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
clientX , clientYで取得できる座標値はクライアント領域での座標値となるため、キャンバスの左上が、ウィンドウの左上と一致していれば同じ値でよいですが、一般的には、キャンバスの左上とウィンドウの左上は一致していないため、そのままの値は利用できません。
キャンバスが、クライアント領域のどの位置にあるかを取得するには、キャンバスオブジェクトの、getBoundingClientRect();メソッドを呼び出すことで、キャンバスの座標を取得できます。clientX , clientYから、キャンバスの左上X,Y座標の値を引くことで、キャンバスでの座標を求めることができます。

求めた座標値は、キャンバスに文字列描画で表示します。文字列の描画の詳細はこちらを参照してください。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


マウスポインタをキャンバス上に移動させると、マウスポインタのキャンバス上での位置が取得でき、画面に表示されます。


マウスポインタを移動させると、座標の数値も変化します。


補足

匿名関数を利用しない場合の例です。下記のコードでも同じ動作になります。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

  <script type="text/javascript">
  var canvas;

  function PrintPosition(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '12pt "MSゴシック"';
    context.fillStyle = 'black';
    context.fillText(message, 32, 48);
  }

  function getMousePosition(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

  function draw() {
    canvas = document.getElementById('SimpleCanvas');
    var context = canvas.getContext('2d');

    canvas.addEventListener('mousemove', onmousemove_canvas, false);
  }

  function onmousemove_canvas(evt) {
    var mousePos = getMousePosition(canvas, evt);
    var message = 'Mouse position X:' + mousePos.x + ', Y:' + mousePos.y;
    PrintPosition(canvas, message);
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
    <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
    <div>Canvas Demo</div>
</body>
</html>
登録日 :2015-10-07    最終更新日 :2016-07-31
このページのタグ:[JavaScript] [HTML] [HTML Canvas]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)