HTML5 canvas静止描画方法(画像)

前回の続きで、HTML5の新要素であるcanvas。
今回は画像の表示について。

 

作ったデモサイト

こんな感じです。
 

共通の書き方

<canvas id="canvas0" width="500" height="500">
</canvas>

width, heightで描画範囲を規定。

 

画像

	var canvas = document.getElementById("canvas");
	var c = canvas.getContext("2d");

	var img = new Image();
	img.src = "images/cambodia01.jpg"
	img.onload = function(){
		c.drawImage(img, 10, 10);
		c.drawImage(img, 10, 200, 200, 200);
		c.drawImage(img, 10, 10, 100, 100, 300, 10, 100, 100);

「document.getElementById(“canvas”)」でid要素を取得して変数に格納します。
「canvas.getContext(“2d”)」でその要素の2次元描画コンテクストを取得します。

imgオブジェクトを生成し、.srcで画像を読み込みます。
読み込みが終わったら(.onload)、関数内の処理を実行します。

.drawImage(img, x座標, y座標)で指定したx座標、y座標にimgを表示。

.drawImage(img, x座標, y座標, width, height)で指定したx座標y座標に指定したwidth, heightに拡大縮小してimgを表示。

.drawImage(img, 元画像から切り出すx座標, 元画像から切り出すy座標, 切り出すwidth, 切り出すheight, 描画するx座標, 描画するy座標, 描画するx座標, 描画するy座標)でimgを元画像から指定した座標と大きさで切り出し、指定した座標と大きさで表示。

 

以上