CANVASでのイベント(クリック、キー操作等)処理

トップページプログラミング技術等CANVAS要素(HTML5)(導入)

CANVASでのイベント(クリック、キー操作等)処理を行うJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

クリックされた位置に画像を貼る

この場合、画面コンテクストではなく、canvasに対するaddEventListenerプロパティで設定する。
このプロパティの引数の'click'は、クリック処理を示し、その次の引数にクリックで呼び出される関数名を記述する。次の引数にはtrueと書いておく。
クリックされた時のカーソルの位置は、呼び出される関数に渡されるeventのプロパティclientX、clientYで其々x座標、y座標が得られる。
但し、これはbody全体の左上端からの座標となる。htmlの中のcanvas要素の置かれる位置を考慮して、以下のような座標変換をする。

canvas.offsetLeftは、ブラウザ画面全体の中でのcanvas領域の左上端のx座標、canvas.offsetTopは同y座標を示す。
従って、カーソル位置のCANVAS領域の中での座標を求めるには、x座標であれば、event.clientX-canvas.offsetLeftとなる。
ここでは呼び出される関数の中で画面クリアをしていないので、クリックするたびに画像は増える。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

クリックによって画像の大きさを変える

ここでは、クリックするたびに、画像の大きさを以前の縦横ともに1.2倍にしている。
動画を作るための繰返し呼び出される関数とともに使っている。
クリックで呼び出される関数の中では、scaleの処理だけ行っているため(translateしていない)、画像はだんだん下へはみ出してしまう事になる。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

キー操作によって画像を動かす

PCのキーボードにある矢印キーを使って、画像を上下左右に動かすようにする。
その場合、windowに対して、addEventListenerを付け、keydownの操作によって呼び出される関数名を設定する。
矢印キーだけでも上下左右の4種類あるので、この関数内では処理をswitch文で切り分ける。其々の矢印に対応する番号のcaseごとに行われる処理を記述する。
ここでは、CANVAS画面の端に座標が来ても、止めるコードは書いていないので、一方向に動かし続けると、やがて画面から出て行く事になる(逆の矢印を押せば戻って来る)。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

画像がカーソルに付いて動くようにする

カーソルが在るx座標、y座標が取得出来るという事は、それに付いて動くように画像を配置する事も出来る。
ここでは、特にクリックしなくても、カーソルがあるだけでその近くに画像を置くようにする。
繰返し呼び出される関数draw()の中に於いて、canvasに対するonmousemoveプロパティに関数名(ここではgetMousePoint)を代入する。
この関数を引数eで呼び出し、e.clientX、e.clientYが、カーソルの位置の座標になる。
e.target.getBoundingClientRect ()で、canvas画面のブラウザ上の位置を取得し、canvas画面内の座標に変換して表示している。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く