画像を表示するには？
解説
Canvas上に画像を表示するには、drawImage()メソッドを使います。
drawImage()メソッドには。次の3種類の書き方があります。
// 画像imageを(dx,dy)の位置に表示する
context.drawImage(image, dx,dy);
// 画像imageを(dx,dy)の位置に幅dw、高さdhに拡大/縮小して表示する
context.drawImage(image, dx,dy,dw,dh);
// 画像imageの指定した矩形領域（左上(sx,sy)、幅sw、高さsh）をCanvasの(dx,dy)の位置に幅dw、高さdhで表示する
context.drawImage(image, sx,sy,sw,sh, dx,dy,dw,dh);
imageの部分には、img要素やImageオブジェクトを指定できます。
img要素がHTML内に存在するときは、document.getElementById()などで得られた値をimageとして指定することができます。
画像ファイルを読み込むときは、Imageオブジェクトを新たに作成し、そのsrc要素に該当のファイル名を指定します。
ここで気をつけなくてはいけないのは、画像を読み込むには、時間がかかる可能性があり、完全に画像が読み込まれる前にdrawImage()メソッドを実行してしまうと、例外が発生して正しく表示されないということです。そのため、画像を表示する処理は、画像の読み込み完了イベントであるonloadイベントハンドラ内に書く必要があります。
次にここまで説明した方法で画像を表示する例を示します。
var img1 = document.getElementById("bird");
context.drawImage(img1, 10,10);
var img2 = new Image();
img2.src = "bird.jpg";
img2.onload = function() {
context.drawImage(img2, 80,10,108,128);
context.drawImage(img2, 8,0,40,40, 10,80,40,40);
}
HTML側のコード：
<img src="bird.jpg" id="bird">
bird.jpg:
関連項目
Canvasとは
