HTML5 canvasを使用してみる～画像表示 | IT工房

画像表示方法

HTMLCanvasElementオブジェクトは、HTMLページにcanvasタグを配置することで作成されます。
JavaScriptでcanvasを操作する場合はDOM経由で行います。canvas要素への参照を保存する新たな変数をtheCanvasという名前で定義します。もちろん、変数ですからtheCanvasという名前にこだわる必要はありません。適当につけた変数名です。変数を宣言後にdocument.getElementById()メソッドでcanvasの参照を取得します。引数の’canvas’はcanvas要素に着けたID名です。
```
var theCanvas = document.getElementById('canvas');
```
次に必要なのは、描画を行うための２Dコンテキストへの参照です。
```
var context = theCanvas.getContext('2d');
```
getContext()メソッドの戻り値は、実際に描画用のプロパティ及びメソッドを実装したオブジェクトです。

イメージ処理の基礎

drawImage(image, dx, dy)メソッド

画像をcanvasに描画するにはcontextの持つdrawImage(image, dx, dy)メソッドで描画します。
drawImage(image, dx, dy)メソッドの引数　image に入る値は HTMLImageElement, HTMLCanvasElement, HTMLVideoElement のいずれかを取ることができます。また、 HTMLImageElement, HTMLCanvasElement, HTMLVideoElement のいずれかのノード・オブジェクトを指定することもできます。

最も単純でJavaScriptに頼らないで描画する方法はimgタグで画像を一旦表示してそのimgタグのIDを指定して、イメージをCanvasコンテキストのdrawImage()メソッドに渡します。それで、img画像をcanvas要素に描画させることができます。

JavaScriptを使わないでcanvasに描画する例

HTMLの記述

<img src="dog1.gif" id="dog">

JavaScriptの記述

context.drawImage(dog, 0, 0);

JavaScriptを使用してイメージを生成

一般的にはJavaScriptを使用してイメージを生成します。

Imageオブジェクトを使って画像を表示するのですが、そもそもImageオブジェクトはどこに存在するのか確認しておきましょう。

Imageオブジェクトについて

Imageオブジェクトのツリー構造は以下のとおりです。

JavaScriptのオブジェクト階層の最上位に位置するwindowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトです。

下位オブジェクトには以下の４つが含まれています。
location、history、document、Frame

documentの下位オブジェクトには、以下の６つが含まれています。
Applet、Anchor、Area、 Image、 Link、 Form

Imageオブジェクトのプロパティとその機能

border ：画像が持つ枠線の値をピクセル単位で参照する
complete ：画像の読み込みが完了した場合に真 (true)、完了前は偽 (false) を返す
height ：画像の高さを参照する
hspace ：画像と他のオブジェクトとの横の間隔を参照する
length ：表示されているドキュメント中にある画像の数を参照する
lowsrc ：低解像用画像の URI を参照、または設定する
name ：ドキュメントにある画像の名前を参照、または設定する
src ：作成した画像オブジェクトの URI を参照、または設定する
vspace ：画像と他のオブジェクトとの縦の間隔を参照する
width ：画像の横幅をピクセル単位で参照する

Imageオブジェクトのインスタンス化

Imageオブジェクトは以下のようにnew演算子でインスタンス（オブジェクト）化することができます。こうすることで後で使う画像をあらかじめキャッシュしておくことができるのです。

Imageオブジェクトのインスタンス化と画像ソース指定方法

var spaceShip=new Image();
spaceShip.src="ship1.png";

ところでイメージが正常にロードされたかどうか知らねばなりません。
その手段としてaddEventListener()を使用します。イベントにはloadを使用します。

addEventListenerの使用方法

flower.addEventListener('load', eventFlower, false);

function eventFlower() {
  drawScreen();
}

一般的にaddEventListener の書き方は次のとおりです。

target.addEventListener(type, listener , useCapture);

type：イベントの種類
listener：リスナー関数
useCapture：true を指定した場合はCaptureフェーズ。falseを指定した場合はBubblingフェーズ。省略した場合は false となります。

addEventListenerについては別ページで説明しています。

具体的なサンプルで確認してみましょう。

サンプル　

HTMLソース

<div>
 <canvas id="canvas" width="200" height="200">
    Your browser does not support the HTML 5 Canvas. 
 </canvas>
</div>

JavaScriptソース

window.addEventListener('load', eventWindowLoaded, false);	
function eventWindowLoaded() {
	canvasApp();
}

function canvasApp(){
	if (!canvas || !canvas.getContext) {
		return;
	}else{
		var theCanvas = document.getElementById('canvas');
		var context = theCanvas.getContext('2d');
	}

	var flower=new Image();
	flower.src="flower5.png";
	flower.addEventListener('load', eventFlower, false);

	function eventFlower() {
		drawScreen();
	}

	function drawScreen() {

		context.drawImage(flower, 30, 30);

	}
}