canvasにマウスでお絵描きするJavaScript。これを実現する。

マウスの現在座標をリアルタイムで取得して表示する

①addEventListenerメソッドでmousemoveを指定、第2引数で関数を入れる

document.addEventListener('mousemove', function(e) {
	var x = e.pageX;
	var y = e.pageY;
	document.getElementById("now").textContent = "(" + x + "," + y + ")";
});

e.pageXYを使うと、ページの左上を0,0とした座標が取れてしまうので、Canvas上の座標に変えた方がいい場合はe.offsetX、e.offsetYを使える。

FirefoxだとoffsetXYをサポートして無いという話もあり、正規化をする必要があるかもしれない。

正規化は参考ページから以下のようなやり方を導入した。

document.body.onclick = function(e) {
  e = e || window.event;

  var target = e.target || e.srcElement,
    rect = target.getBoundingClientRect(),
    offsetX = e.clientX - rect.left,
    offsetY = e.clientY - rect.top;

  console.log([offsetX, offsetY]);
};

②onmousemoveプロパティを使う方法でも同じ事が出来る。

document.onmousemove = function (e) {
	var x = e.pageX;
	var y = e.pageY;
	document.getElementById("now").textContent = "(" + x + "," + y + ")";
}

HTMLは

<p id="now"></p>

たぶんだけど、addEventListenerに登録するのは、
mousemove
mousedown
mouseup
で、

プロパティに登録するのは、
onmousedown
onmouseup
onmousemove
で登録する様子。

「on」がつくんだね。

マウスが押された位置を取るmousedown

aaaCanvas.addEventListener('mousedown', function(e) {
  var x = e.pageX;
  var y = e.pageY;
  alert("(X,Y) = (" + x + "," + y + ")" );
});

か

window.onmousedown = function(e) {
  var x = e.pageX;
  var y = e.pageY;
  alert("(X,Y) = (" + x + "," + y + ")" );
}

マウスが離された位置を取るmouseup

aaaCanvas.addEventListener('mouseup', function(e) {
  var x = e.pageX;
  var y = e.pageY;
  alert("(X,Y) = (" + x + "," + y + ")" );
});

とか

window.onmouseup  = function(e) {
  var x = e.pageX;
  var y = e.pageY;
  alert("(X,Y) = (" + x + "," + y + ")" );
}

マウスイベントを使ってCanvasにお絵描きをする

Javascriptは

  <script>
    document.addEventListener('DOMContentLoaded', abc);

    var ctx;
    var aaaCanvas;
    var drawFlg = false;

    function abc() {
      aaaCanvas = document.getElementById("aaa");
      ctx = aaaCanvas.getContext("2d");

      ctx.strokeStyle = "#3399FF"; //線の色
      ctx.fillStyle = "#C8F1FF"; //塗りつぶし
      ctx.lineWidth = 3; //線の幅

      //マウスダウン時のイベント、描画の開始
      aaaCanvas.addEventListener('mousedown', function(e) {
        drawFlg = true;
        ctx.beginPath();
      });

      //マウスムーブ時のイベント、描画の開始フラグを見て描画する
      aaaCanvas.addEventListener('mousemove', function(e) {

        rect = e.srcElement.getBoundingClientRect();
        var offsetX = e.clientX - rect.left;
        var offsetY = e.clientY - rect.top;

        if(drawFlg) {
          ctx.lineTo(offsetX,offsetY);
          ctx.stroke();
        }

        document.getElementById("now").textContent = "pageXY: " + "(" + e.clientX + "," + e.clientY + ")" + "  offsetXY: " + "(" + offsetX + "," + offsetY +")";
      });

      //マウスアップ時に描画を停止する
      aaaCanvas.addEventListener('mouseup', function(e) {
        drawFlg = false;
      });

    }

  </script>

HTMLは

  <body>
    <canvas id="aaa" width="500" height="500" style="background-color:#ffffcc;"></canvas>
    <p id="now"></p>
  </body>

と記述。