画像を拡大縮小して描画することができます。
鳥の画像サイズは、4000x300ピクセル。幅と高さを20分の1に縮小しています。
var imgBird = new Image();
imgBird.src = "bird.jpg";
imgBird.onload = function(){
context.drawImage(imgBird, 0, 0,imgBird.width, imgBird.height,
0,0,imgBird.width / 20, imgBird.height / 20);
}
0, 0,imgBird.width, imgBird.heightは画像データの、 0:X座標 0:Y座標 imgBird.width:,幅 imgBird.height:高さ
を対象にしています。早い話、画像丸ごとです。
0,0,imgBird.width / 20, imgBird.height / 20は描画のやり方です。
0:描画するX座標 0:描画するY座標 imgBird.width / 20:描画する幅 imgBird.height / 20:描画する高さ
これで幅と高さが20分の1で描画されます。
縮小も同様です。
UFOの画像サイズは、60x45ピクセル。幅と高さを3倍しています。
var imgUfo = new Image();
imgUfo.src = "ufo.png";
imgUfo.onload = function(){
context.drawImage(imgUfo, 0, 0,imgUfo.width, imgUfo.height,
0, imgBird.height / 20 + 10,imgUfo.width * 3, imgUfo.height * 3);
}
幅と高さを3倍にしています。また、描画のY座標は表示した鳥の画像の高さに10ドットを加えています。
全ソースです。
画像を拡大縮小して描画
鳥の画像サイズは、4000x300ピクセル。20分の1に縮小
UFOの画像サイズは、60x45ピクセル。3倍に拡大
解説はこちら。
|