CANVASで複数の画像を別々に動かす

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

CANVAS画面上に複数の画像を置き、別々に動かすJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

複数のオブジェクトを座標変換で別に動かす

画像の数の分だけ、其々のx座標、y座標を持つ変数(ここでは配列としている)を用意する。
其々描画した後に、座標を変える。座標の変え方が違えば当然、違う動きとなる。

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

複数のオブジェクトをrotate回転で別に動かす

rotate回転は、CANVASの画面全体を回転させるため、配置された複数の画像は一緒に回ってしまう。
これを別々にするには、save()で回転前の画面の状態を保存し、画面全体を回転させる。その後、一つの画像だけを描画し、restore()でsave()された画面の状態を呼び戻す。

すると図のように、描画した画像以外は元に戻るので、単一の画像だけを回転させる事が出来る。
一つの画像に於けるtranslate→rotate→translate→drawImageの流れごとに、前後をsaveとrestoreで挟む事になる。
角度を表す変数も別に用意し、ここでは其々違う角度で逆方向に回すようにしている。

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

多数のオブジェクトを配列として扱う

ファイル名に通し番号がある場合、"filename"+i+".jpg"等で、繰り返し文の中でファイル名を生成出来る(iに0から始まる数字が入っている)。
ここでは位置、回転スピードを其々乱数で決め、複数の画像を同時に回転させている(再読み込みでパラメータが変わる)。

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

多数のオブジェクトを異なる時間帯で描画する

描画モジュールが呼び出されるたびに、一つずつ数字が増えるタイマーを用意する。
各画像ごとに、処理を行うか否かを決めるフラグ(0なら無処理、1なら処理)を用意し、最初は0にしておく。
各画像ごとに、フラグを反転させる時間間隔をランダムに1~10の10段階で設定する(勿論、もっと多数の段階があってもよい)。
描画モジュールが呼び出されるごとに、各画像に付いてフラグが1かを調べ、1ならば処理をする(ここでは、最初にランダムに決めた位置に表示する)。
その後、時間間隔を10倍(点滅スピードを上げるならば、この数字を小さくする)したものでタイマーを割り、余りが0ならフラグを反転する。
例えば、時間間隔が3の画像の場合、30で反転、60で反転、と描画モジュールが30回呼び込まれるたびに、描画と消去を繰り返す。

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

クリックで画像を動かしたり止めたりする

(クリック処理の扱い方は、「イベント(クリック、キー操作等)処理」のページを参照)
動画は、HPの他の箇所の閲覧に邪魔な場合があるので、最初は停止し、ボタンをクリックする事で、動くようにする。
画像の或る位置にボタン画像(START/STOP)を置き、クリックで呼び出される関数では、カーソル位置がそのボタンのエリアにあるかを判定する。
そのエリア内であれば、動画を動かすか否かのフラグを反転する(このフラグは最初は0に設定、クリックされるたびに、1と0になる事を繰り返す。0で静止、1で動き)。
描画する部分では、このフラグが1である場合だけ、動きを加える(ここでは各画像の回転)部分を動かすようにする。

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