HTML５で特徴的な機能としてcanvas要素があります。今までのHTMLでは画像を扱うには画像のファイルを用いるかFlashなどのプラグインを用いる必要がありました。追加されたcanvas機能は２Dのグラフィックを描くことができます。
今回はcanvasタグを用いて図形を描画する方法を簡単に紹介します。
canvasタグ
HTMLのcanvasタグの設置は通常のタグ同様簡単です。
|
1 2 3 |
<canvas id="my-canvas"> キャンバス機能が有効なブラウザを使用してください。 </canvas> |
canvasのタグを通常のタグ同様に記述します。HTMLの標準的な属性も使うことができます。
この例ではclassの属性を追加しています。また、canvas機能が使用できないブラウザのためにcanvasタグの中に注意を書いています。
HTML５が使用できないブラウザは年々少なくなっていますが、念のために注意書きを書いておくべきでしょう。
グラフィクスの描画
グラフィックスの描画はJavaScriptで行います。四角形を描画してみます。
|
1 2 3 4 5 6 7 8 9 10 |
var canvas = document.getElementById('my-canvas'); //コンテキストを取得 var context = canvas.getContext('2d'); //色をRGBで決定 context.fillStyle = "rgb(255,0,0)"; //第一引数と第二引数は描画の位置を示します。 //第三引数は幅、第四引数は高さを設定します。 context.fillRect(0, 0, 100, 100); |
実際に描画したものです。
まずcanvas要素を取得します。次にcanvas要素に描画するためのcontextを取得します。
取得したコンテキストに対して、色を指定するfillStyleを先に実行しその後fillRectで四角形を描画します。fillStyleで色を決定せずにfillRectを行うと黒い図形が描画されます。
まとめ
canvasタグでグラフィックを描画する方法を今回紹介しました。四角形を描画するほかにも円の描画や線の描画等を行うことができます。詳しくは以下のサイトを参照するとよいでしょう。
JavaScriptで描画するため簡単ではありませんが、今までにない表現が可能になるので、是非挑戦してみてください。
