【HTML5】入門 HTML5をまとめてみる5【Canvas】

HTML/CSS

こんにちは、しきゆらです

HTML5関連投稿の5回目です（これまでのHTML5関連の記事はこちらから→入門HTML5）

入門 HTML5
前回はCanvasでのグラデーションを見てみました

今回は、Canvasで画像を表示する方法を見てみます

 

 

Canvasで画像を表示する

まずは今回やるものを見てみましょう→デモページ

イメージタグでの表示とCanvasでの表示を混ぜてあります

ではスクリプトを見てみます

 

画像表示のスクリプト

var image = document.getElementById("image1");

window.onload = function(){
    var canvas1 = document.getElementById("canvas1");
    var context1 = canvas1.getContext("2d");
    context1.drawImage(image, 0, 0);

    var canvas2 = document.getElementById("canvas2");
    var context2 = canvas2.getContext("2d");
    context2.drawImage(image, 69, 49,162, 102);

    var canvas3 = document.getElementById("canvas3");
    var context3 = canvas3.getContext("2d");
    context3.drawImage(image, 40, 40, 150, 150, 75, 25, 150, 150);

    var canvas4 = document.getElementById("canvas4");
    var context4 = canvas4.getContext("2d");
    for (var x = 0, y = 0; x < 300, y < 300; x += 95, y += 30) {
        context4.drawImage(image, 40, 40, 150, 150, x, y, 150, 150)
    }
}

今回は、imgタグのものをCanvasに表示していますが、Image()オブジェクトでもいいです

どちらの場合でも、画像がきちんと読み込まれた後に処理を開始しなければいけないことに注意です

そのためには、onloadイベントで処理を開始をするのが安全でしょう

 

では、細かく見て行きます

 

画像の取得

var image = document.getElementById("image1");

まずは1行目の部分

今回は、すべてのCanvasで同じ画像を使ったので一番上で宣言しています

Canvasの取得と同じく、imgタグのidから取得します

 

Image()オブジェクトの場合は以下のようになるかと思います

var image = Image();
image.src = "../images/hokkaido.png";

srcメソッドで画像のパスを指定してあげるといいかと思います

 

画像の描画

var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
context1.drawImage(image, 0, 0);

4～6行目部分です

上2行はいつも通りなので略

3行目でCanvasに画像を描画しています

drawImage()メソッドでCanvasに画像を描画するんですね

 

・・・スクリプトを見てみると、drawImage()メソッドが3種類あるのがわかるでしょうか

それぞれ見てみます

drawImage(image, dx, dy)

この場合は引数として、画像imageとCanvas上の座標(dx, dy)を渡します

 

drawImage(image, dx, dy, dw, dh)

この場合は、画像imageとCanvas上の座標(dx, dy)の他に、画像の幅dwと高さdhを渡します

デモページの「canvas(場所や大きさ指定)」の部分がこれに当たります

画像の大きさが変わっていることがわかりますね

 

drawImage(image,　sx, sy, sw, sh, dx, dy, dw, dh)

この場合は、画像imageとCanvas上の座標(dx, dy)、画像の幅dwと高さdhの他に画像の矩形領域を渡します

元画像の座標(sx, sy)から幅sw、高さshの範囲をCanvas上の座標(dx, dy)に幅dw、高さdhの大きさで描画します

デモページの「canvas(画像の表示する部分を指定)」がこれに当たります

 

Canvasで画像を描画する意味

デモページを見ると、imgタグで十分な場合もありますね

「こんなこともできます」の部分では、imgタグを複数並べれば同じことができるでしょう

では、どうしてCanvasで画像を描画するのはどうしてでしょう

 

単純な答えは、複雑な図を簡単に作成するためでしょうね

例えば、アイコンを作る場合は画像の他に文字などが入るでしょう

それをタグの重ね合わせでやると複雑になってしまいます

それをCanvasで作ることで、すっきりと表現できるようになります

 

専用のソフトを使わずに、アイコンなどのようなものを作れるのがCanvasの強みでしょうか

では、今回はここまで

恐らく次でCanvasはおわりになると思います

入門 HTML5

 

おわり

Posted by しきゆら