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>
と記述。