今まで、webサイトで図形を描画するには、PNG、JPEG、GIFなどの画像データかFlashを埋め込むといった方法に限られていました。どれも、データを別に用意する必要があります。
しかし、HTML5で登場した<canvas>タグは、HTMLとJavaScriptでビットマップ画像を描画することができる要素です。今回は、HTML5における<canvas>タグの使い方についてご紹介します。
HTML5における<canvas>タグの使い方
使い方は非常にシンプルで、図形を描画したい場所に<canvas>タグを設置し、設置した<canvas>タグと関連付けてJaaScriptで処理を記述するだけです。
基本的に設置の時は以下のHTMLを記述するだけです。
|
1 2 |
<canvas id="sample"> </canvas> |
widthとheightで図形の大きさを指定することも多いです。その場合の記述例です。
|
1 2 |
<canvas id="sample" width="" height=""> </canvas> |
HTMLだけでは、何も表示されないので、設置したHTMLと関連付けてjavascriptで処理を記述して使用してください。
サンプルで、キャンバスを取得する際のJavaScriptの記述です。getElementByIdメソッドという、因数にid属性値を指定して、好きな要素を抜き出すものを利用します。
|
1 |
var canvas = document.getElementById('sample'); |
サンプルコードです。今回は、四角形を描画してみています。rectと言うのが四角形のことで、strokeRectで四角形の線を描画する指示を出しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<head> <script> onload = function() { kihon(); pie(); }; function kihon() { var cnvs = document.getElementById('sample'); var ctx = cnvs.getContext('2d'); ctx.strokeStyle = 'rgb(255,0,255)'; ctx.strokeRect( 0, 0, 100,100); } </script> </head> <body> <canvas id="sample" width=“500” height=“500"> </canvas> </body> |
表示サンプルです。
基本的な記述の仕方は上記のようになりますので、カスタマイズして使用してください。
