ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３６．画像の描画。「canvas」

*最新のIE9が必要です。

DOMで画像を表示できるように、
canvasにも画像を表示することができます。

まず

・Image

Imageメソッドでイメージオブジェクトを作ります。

そのイメージに画像を指定し読み込ませます。

今回使用するソースコード

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　//イメージオブジェクトの作成
　　var img = Image();
　　//イメージ読み込み
　　img.src = "f_mail2.gif";

　　//画像が読み込まれたら
　　img.onload = function () {
　　　　//画像を指定位置に描画
　　　　ctx.drawImage(img, 0, 0);
　　　　//画像を三倍にして描画
　　　　ctx.drawImage(img, 40, 0, img.width * 3, img.height * 3);
　　}
}

そして、

・drawImage

drawImageメソッドを使い描画します。標準の機能では

引数に(イメージオブジェクト, Ｘ座標、 Y座標)

と取り、画像を指定位置に描画します。

このとき、イメージオブジェクに「画像が読み込まれている」必要があります

そのため、img.onloadイベントが必要になります。

さらに、画像のサイズを指定して描画する機能もdrawImageメソッドにあります。

引数に（イメージオブジェクト, X座標, Y座標, 横幅, 縦幅）

と使います。

実行結果

コラム：

現代プログラミングの特徴に、オーバーロードがあります。
後で説明しますが、簡単に言うと。

同じメソッド名で引数を変えたバリエーションを作ることです。

そのオーバーロードにより、drawImageメソッドはいろいろなバリエーションを
持っています。