【連載】第二回HTML5でCanvasアプリを作る入門編 ~マウスクリックイベントについて~
第二回目のテーマはCanvasのマウスイベントについて書いていきます。
マウスイベントを使うことによってCanvasアプリを動的なものにすることができます。
今回は第一回目
【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ - nigoblog
で紹介したメソッドと組み合わせてマウスイベントを紹介していきます。
- クリックして画像をつける
- クリックして画像をけす
- クリックして画像をつけたり消したりする
- ボタンを設置する
などについて説明します。
クリックして画像をつける
まずは前回の記事のコードをそのままコピペ
<!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'); </script> </body> </html>
ではまずcanvas内で画像をクリックすると、
四角が表示されるコードを追加します。
その前に単純に四角を描画するだけなら、
function init(){ ctx.rect(20, 20, 200, 200); ctx.stroke(); }
このコードを追加することでできます。
ではここにcanvas内でクリックすると四角を描画するという形にinit()内を次のように変更します。
function init(){ canvas.addEventListener('click', function(e){ ctx.rect(20, 20, 200, 200); ctx.stroke(); }, false); }
するとcanvas内でクリックをすると四角が現れます。
クリックして画像を消す
次についてる状態から消す方法について書きます。
function init(){ ctx.rect(20, 20, 200, 200); ctx.stroke(); canvas.addEventListener('click', function(e){ ctx.clearRect(0, 0, 500, 500); }, false); }
clearRect()というメソッドはcanvas内の描画を全て消すというようなメソッドです。
引数はclearRect(x, y, width, height)となっています。
クリックして画像をつけたり消したりする
次はついているならば消し、消えているならつけるのようなコードに変更します。
function init(){ var toggle = true; canvas.addEventListener('click', function(e){ if(toggle){ draw(); toggle = false; }else{ clear(); toggle = true; } }, false); } function clear(){ ctx.clearRect(0, 0, 500, 500); } function draw(){ ctx.rect(20, 20, 200, 200); ctx.stroke(); }
少し複雑ですが、まず「消す」関数 clear()を作成します。
同様に「つける」関数draw()を作成します。
init()では、まずtoggleフラグを用意します。
toggleについてはこちらを参考に
Objective-Cでトグルボタンを作る - nigoblog
まずtoggleのデフォルトをtrueにします。
ボタンが押されるとtrueなのでまずdraw()が呼び出されます。
するとtoggleがfalseに切り替わり、もう一度ボタンが押されると、
clearが呼ばれます。
このようにして切り替えを行います。
ボタンを設置する
最後はボタンの設置について。
あるボタンをクリックして画像をつけたり消したりします。
まず次のような関数を作成します
function button(x, y, width, height){ ctx.rect(x, y, width, height); ctx.stroke(); var toggle = true; canvas.addEventListener('click', function(e){ var button = e.target.getBoundingClientRect(); mouseX = e.clientX - button.left; mouseY = e.clientY - button.top; if(x < mouseX && mouseX < x + width){ if(y < mouseY && mouseY < y + height){ if(toggle){ draw(); toggle = false; }else{ clear(); toggle = true; } } } }, false); }
次にinit()内を次のように変更します。
function init(){ button(400, 400, 50, 50); }
すると右下にボタンが現れ、クリックすると画像がつき、
もう一度クリックすると画像が消えます。
クリックの範囲を指定することでクリックイベントがボタン風に動作します。
まずクリックのeというオブジェクトから
e.target.getBoundingClientRect()
よりクリックした要素の位置情報。この場合canvasの情報を取得します。
mouseX = e.clientX - button.left;
mouseY = e.clientY - button.top;
e.clientXとe.clientYはwindow全体で押した部分の絶対値。
そこからcanvas要素の情報を引くことで、canvasに対する相対的な位置が取得できます。
それが
if(x < mouseX && mouseX < x+width) if(y < mouseY && mouseY < y+height)
を同時に満たしていればボタンを押していることとなります。
以上、クリックイベントからそれを応用したボタンの作り方まででした!
是非とも参考にどうぞ。
次回はマウスイベント後編ということで
マウスの移動などを取得する話について書きます。
