nigoblog

暫定無職のブログ

【連載】第三回HTML5でCanvasアプリを作る入門編~様々なマウスイベントについて~

第三回となる今回は、クリック以外のマウスイベントについて書いていきます。

これをすることによってアプリケーションを作る応用の幅が聞きます。

  1. マウスの移動を検出
  2. スマフォで移動を検出
  3. まとめ

以上について書いていきます。

マウスの移動を検出

まずは第一回目のコードをそのままコピペ

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title>canvasApp</title>
</head>
<body  onload="init()">
	<canvas id="first" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('first');
var ctx    = canvas.getContext('2d');
function init(){
}
</script>
</body>
</html>

まずは四角を描画するための関数draw()とリセットする関数clear()を作成します。

function draw(x, y){
  ctx.strokeRect(x, y, 50, 50);
}
function clear(){
  ctx.clearRect(0, 0, 500, 500);
}

次はinit()内に次のように追加します

canvas.addEventListener('mousemove', function(e){
}, false);

ここがマウスイベントを取得するメイン部分。
この中に、

clear();
x = e.layerX;
y = e.layerY;
draw(x, y);

と追加すると、canvas内の四角がマウスを追尾します。

スマフォで移動を検出

スマフォの場合はmousemoveではなく
touchmoveを使います。

単純にこれだけなのですが、一つ問題が。
それはマウス移動と同時にスクロールしてしまうということ!
なので次のコード

event.preventDefault();

canvas.addEventListener('touchmove', function(e){
  event.preventDefault();
  ~
  処理
  ~
}, false);

の用に使います。

まとめ

今回で大方マウスイベントについてやりました。
次回は第四回、最終回というわけでアニメーションについてやりたいと思います!