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