トップ > HTML5 | JavaScript > HTML5 canvas とマウス座標の制御

HTML5 canvas とマウス座標の制御

2010-06-09 (水)
HTML5 | JavaScript

今度は、HTML5 の canvas にマウス座標などを絡めたサンプルなんぞを作ってみた。

てゆーか、本来、今現在、こんなサンプルを作っている暇がない状況なんだけども、ちょっとした気晴らしで現実逃避だったりもするw

⇒サンプルを見る（別ウインドウ）

とりあえずあんま余裕がなかったんで、座標取得やらマウスイベントの簡単なサンプル。

マウスを動かすとXY座標が表示。クリックでその場所に赤い円が描かれ、クリックを離すとで少し大きな青い円が描かれる。あとは canvas の領域からマウスが外れると黒色で描かれマウスアウトと表示される。

まぁ、このくらいシンプルな方が、後々にこの記事を見た時にちょうど良いサンプルとなるんでいいかー。

javascript のコードはこんな感じ。


var cW = 600;	//キャンバス横サイズ
var cH = 300;	//キャンバス縦サイズ
var mouseX;
var mouseY;
window.onload = function() {
	draw();
};
function draw() {
	//キャンバスの初期処理
	var canvas = document.getElementById('testCanvas');
	if ( ! canvas || ! canvas.getContext ) return false;
	//2Dコンテキスト
	var ctx = canvas.getContext('2d');
	//イベント：マウス移動
	canvas.onmousemove = mouseMoveListner;
	function mouseMoveListner(e) {
		//表示クリア
		ctx.clearRect(0, 0, cW, cH);
		//座標調整
		adjustXY(e);
		//テキストの描画
		ctx.globalAlpha = 1;
		ctx.fillStyle = "#666666";
		ctx.fillText("X座標：" + mouseX, 5, 12);
		ctx.fillText("Y座標：" + mouseY, 5, 24);
	}
	//イベント：マウスダウン
	canvas.onmousedown = mouseDownListner;
	function mouseDownListner(e) {
		//表示クリア
		ctx.clearRect(0, 0, cW, cH);
		//座標調整
		adjustXY(e);
		//円を描く
		ctx.beginPath();
		ctx.fillStyle = "#CC0000";
		ctx.arc(mouseX, mouseY, 20, 0, Math.PI * 2, false);
		ctx.fill();
		//テキストの描画
		ctx.globalAlpha = 1;
		ctx.fillStyle = "#666666";
		ctx.fillText("X座標：" + mouseX, 5, 12);
		ctx.fillText("Y座標：" + mouseY, 5, 24);
		ctx.fillText("イベント：マウスダウン", 5, 36);
	}
	//イベント：マウスアップ
	canvas.onmouseup = mouseUpListner;
	function mouseUpListner(e) {
		//表示クリア
		ctx.clearRect(0, 0, cW, cH);
		//座標調整
		adjustXY(e);
		//円を描く
		ctx.beginPath();
		ctx.fillStyle = "#0000CC";
		ctx.arc(mouseX, mouseY, 40, 0, Math.PI * 2, false);
		ctx.fill();
		//テキストの描画
		ctx.globalAlpha = 1;
		ctx.fillStyle = "#666666";
		ctx.fillText("X座標：" + mouseX, 5, 12);
		ctx.fillText("Y座標：" + mouseY, 5, 24);
		ctx.fillText("イベント：マウスアップ", 5, 36);
	}
	//イベント：マウスアウト
	canvas.onmouseout = mouseOutListner;
	function mouseOutListner(e) {
		//表示クリア
		ctx.clearRect(0, 0, cW, cH);
		//座標調整
		adjustXY(e);
		//矩形を描く
		ctx.beginPath();	//線を描くと宣言
		ctx.fillStyle = "#000000";
		ctx.fillRect(0, 0, cW, cH);	//塗りつぶした矩形を描画
		//テキストの描画
		ctx.globalAlpha = 1;
		ctx.fillStyle = "#666666";
		ctx.fillText("X座標：" + mouseX, 5, 12);
		ctx.fillText("Y座標：" + mouseY, 5, 24);
		ctx.fillText("イベント：マウスアウト", 5, 36);
	}
	function adjustXY(e) {
		var rect = e.target.getBoundingClientRect();
		mouseX = e.clientX - rect.left;
		mouseY = e.clientY - rect.top;
	}
}

注意点として、座標はウインドウの左上からが基準となるっぽいんで、「getBoundingClientRect()」を使って要素の絶対座標を取得し座標位置を調整すると良い感じらしい。

今はいちいち画面をクリアしているんだけども、ちょっと軽くカスタマイズすれば、簡単なお絵かきツールが作れそうな予感。

canvas を画像に変換することもできるみたいだし（うろ覚え）、またちょっと時間ある時にチャレンジしてみようかなー。