CANVASでのフェードアウト、拡大・縮小

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

CANVASでの画像のフェードアウト、拡大・縮小等を行うJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

画像をフェードアウト、フェードインさせる

フェードアウト(徐々に透明にする)、フェードイン(逆に次第に現れる)させるには、globalAlphaプロパティを使う。
この値は1で透明度ゼロ、0で完全に透明になる。
透明度は、回転等と同様に、画面全体に設定される(従って、複数の画像を別の透明度にする場合は、save()、restore()の組で挟む)。
ここでは、0.01ずつ変化させ、完全に透明になったら徐々に戻し、透明度ゼロになったらまた少しずつ透明にしている。
(壁に付いたら反転する運動と合わせている)

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

画像を拡大(または縮小)させる

スケールの設定もscaleプロパティで、画面全体に対して行われる。scale(x軸の倍率,y軸の倍率)で設定する。
ここで注意するのは、画像の位置を決める左上端の座標も、画面の拡大に応じて動いてしまう点だ。
従って、translateで座標を元に戻す必要がある。座標を元に戻す変換は、2倍に拡大したら、1/2にする等、逆数で指定する事になる。

二つの画像のうち、一つだけを拡大する場合は、図のようにsaveとrestoreで挟んで処理する。
なお、倍率を1未満にすれば当然、縮小処理になる。

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