drawImage

drawImage基本

画像の表示は「drawImage()」命令で行います。表示する画像の要素、表示位置の座標を指定することで表示されます。


縮小

元々画像のサイズが333×398のため大き過ぎますね。これを縮小して表示します。「drawImage()」命令の第4、第5引数に縮小後の横幅、縦幅を設定します。

プログラムを見ていきます。

26行目,27行目で画像の横、縦幅を6で除算し変数に格納しています。これは画像を1/6に縮小するために事前計算しているのです。

29行目で事前計算した値を使い画像を縮小表示しています。

縦の表示位置が「canvas.height-y_size-10」となっていますが、画像を下に表示するため、canvasの縦幅から画像の縦幅を減算し位置を求めています。最後の「-10」は画像下に余白を持たせるため減算しています。

元画像の切り抜き

元画像を切抜いて表示することができます。

便利な機能ですが使いどころが無いように感じるかもしれません。この機能はアニメーションに利用されることがあります。

例えば戦闘機の爆発シーンを次のように一つの画像にします。

これを左側から切抜いて表示していけば爆発のアニメーションになります。

プログラムで見ていきます。


画像幅から6を除算し縮小サイズを求めていましたが、画像が爆発シーン分横長(4倍)になりました。そこで26行目ではさらに4で除算しています。

30行目で関数draw()を10ミリ毎に呼び出しています。

関数draw()では50回呼び出されると次のシーンを表示するようにしています。そのロジックが35行目です。

変数countは呼び出される度に1加算されます。これを50で除算し結果をMath.floor()命令により小数点を切り捨て、変数stepに格納しています。

これでcountが50未満の場合はstepが0、50~100未満の場合は1、100~150未満の場合は2・・・となります。このstepを利用し元画像を切抜きます。


「drawImage()」命令により画像が表示できるようになりました。次に図形と同じように人の指示により動かします。

タイトルとURLをコピーしました