Javascriptでcanvas要素に画像を描画する

こんばんは。きわさです。

今回はHTMLのcanvas要素にJavascriptで画像を描画する方法についてです。

HTMLはこんな感じに書いてみます。
canvasを300 x 300のサイズで用意します。

<div>
    <canvas id="c" width="300px" height="300px"></canvas>
</div>

続いて、javascriptです。
今回、画像(test.jpg)は600 x 600を使います。

function test1() {
    var img = new Image();
    img.src = "test.jpg";
    var canvas = document.getElementById("c");
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    return;
}
function test2() {
    var img = new Image();
    img.src = "test.jpg";
    var canvas = document.getElementById("c");
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0, 300, 300);
    return;
}
function test3() {
    var img = new Image();
    img.src = "test.jpg";
    var canvas = document.getElementById("c");
    var context = canvas.getContext("2d");
    context.drawImage(img, 100, 100, 400, 400, 0, 0, 300, 300);
    return;
}

test1～test3の3つの関数を用意しました。
描画のdrawImage()の引数が違います。
解説は後に回して、とりあえず動きを見てみます。

test1～test3の実行ボタンを用意しました。
押すと下のcanvas領域内に描画されます。

描画されましたか。
それぞれのケースの解説です。
まずtest1のケースでは、
drawImage(image, dx, dy)
の形式となっており、引数はそれぞれ以下のようになっています。
image: 画像
dx: 描画位置(x座標)
dy: 描画位置(y座標)
なので、600 x 600の画像に対し、canvasは300 x 300のため、画像の左上の300 x 300部分のみの表示となっています。

次にtest2のケースでは、
drawImage(image, dx, dy, dw, dh)
の形式となっており、引数はそれぞれ以下のようになっています。
image: 画像
dx: 描画位置(x座標)
dy: 描画位置(y座標)
dw: 描画する幅
dh: 描画する高さ
で、dwとdhに300を指定しているため、600 x 600の画像が300 x 300に縮小されて表示されています。

最後にtest3のケースでは、
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
の形式となっており、引数はそれぞれ以下のようになっています。
image: 画像
sx: 使用する画像の位置(x座標)
sy: 使用する画像の位置(y座標)
sw: 使用する画像の幅
sh: 使用する画像の高さ
dx: 描画位置(x座標)
dy: 描画位置(y座標)
dw: 描画する幅
dh: 描画する高さ
で、dx, dy, dw, dhはtest2と同じで、canvasの(0, 0)に300 x 300の画像を表示します。
そしてsx, syには100を指定し、sw, shには400を指定しています。
これは600 x 600の画像の(100, 100)の位置から400 x 400を使用するということです。
つまり、600 x 600の画像の中央400 x 400を300 x 300に縮小して表示しています。

以上がcanvasの描画方法です。
これを使って、15パズルとか作れそうですね。
まぁ、それはまたの機会に。