つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~canvasによる描画

 今回からHTML5で新しく追加されたcanvasjavascriptを用いてWeb上に描画を行う方法について紹介していきたい。

1. canvasの生成

 canvas要素とは幅、高さ、idを指定した描画領域で、例えば以下にように記述する

<canvas width="300" height="150" id="canv0" style="background-color:yellow;border: 1px solid;"></canvas> 

実行すると以下のように幅300ピクセル、高さ150ピクセルでidが"canv0"の描画領域を生成する。なお色などについてはstyleで記述して、色については"background-color:yellow;、枠線については"border: 1px solid;"で指定している。

 

2. canvas上の描画

 次にcanvas上に図形を描画する。canvas生成時に指定したidを用いてdocument.getElementByIdにより関連付けを行いgetContextで描画を有効にする。さらに描画用のメソッドにより図形を描画していく。 まず上とは異なるidのcanvasを生成し、id="canv_1"とする。

<canvas width="300" height="150" id="canv_1" style="background-color:yellow;border: 1px solid;"></canvas>

次に描画を行うためのjavascriptコードを記述する。canvas上の座標(x,y)=(20,20)から幅50,高さ50で青色に塗りつぶした四角形を描画する。

<script>
var canvas = document.getElementById('canv_1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.fillStyle = "rgb(0, 0, 255)";
    context.fillRect(20,20,50,50);
}
</script>

実行すると以下のように黄色いcanvas上に青い四角の領域が描画できていることがわかる。なおcanvasをサポートしていないブラウザでは実行させないため処理をif文で囲うとよい。

Canvasは、Internet Explorer9以上、Firefox1.5以上、Opera9以上、Google ChromeSafariでサポートされている。

3. まとめ

 今回はcanvasjavascriptを用いてWeb上に描画を行う方法について簡単に紹介した。次回以降で描画メソッドと適用例について逐次紹介していく予定である。