今回からHTML5で新しく追加されたcanvasとjavascriptを用いて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 Chrome、Safariでサポートされている。
3. まとめ
今回はcanvasとjavascriptを用いてWeb上に描画を行う方法について簡単に紹介した。次回以降で描画メソッドと適用例について逐次紹介していく予定である。