【連載】第三回HTML5でCanvasアプリを作る入門編~様々なマウスイベントについて~
第三回となる今回は、クリック以外のマウスイベントについて書いていきます。
これをすることによってアプリケーションを作る応用の幅が聞きます。
- マウスの移動を検出
- スマフォで移動を検出
- まとめ
以上について書いていきます。
マウスの移動を検出
まずは第一回目のコードをそのままコピペ
<!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);
の用に使います。
まとめ
今回で大方マウスイベントについてやりました。
次回は第四回、最終回というわけでアニメーションについてやりたいと思います!
