画像を拡大縮小して描画[解説]

画像を拡大縮小して描画[解説]

画像を拡大縮小して描画することができます。

鳥の画像サイズは、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分の１で描画されます。

縮小も同様です。 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);
	}

幅と高さを３倍にしています。また、描画のY座標は表示した鳥の画像の高さに10ドットを加えています。
全ソースです。


<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>画像を拡大縮小して描画</title>
	<style>
	#canvas{
		background-color: aquamarine;
	}	
	</style>

	<script type="text/javascript">
		var context = null;
		var canvas = null;

		function timerTask() {
			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);
			}

			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);
			}
		}

		function init() {
			//描画コンテキストの取得
			canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');
			// window.setInterval(timerTask, 100);
            timerTask();
		}
	</script>

</head>

<body onLoad="init()">
	<canvas width="250" height="400" id="canvas"></canvas><br>
	鳥の画像サイズは、4000x300ピクセル。20分の1に縮小<br>
	UFOの画像サイズは、60x45ピクセル。3倍に拡大<br>
	解説は<a href="image_spread_.html">こちら</a>。
</body>

</html>