画像のそのまんま描画[解説]

画像のそのまんま描画[解説]

画像の描画はimageオブジェクトでおこないます。

画像の読み込み


		var img = new Image();
		img.src = "cog.png";

画像の描画


			context.drawImage(img, 60, 35);

これだけです。しかし、描画するときにまだ画像が読み込まれてないことがあるので注意してください。外部変数でImage()を配置すればこの現象は回避できます。全ソースです。


<!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;
		var img = new Image();
		img.src = "cog.png";

		function timerTask() {
			context.drawImage(img, 60, 35);
		}

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

</head>

<body onLoad="init()">
	<canvas width="200" height="150" id="canvas"></canvas><br>
	解説は<a href="image_.html">こちら</a>。
</body>

</html>