<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する

<canvas>タグの説明

<canvas>は、ウェブページ上に図形を描くために使用します。この要素を使うと、画像やプラグインを使わずにJavaScriptベースで図形やアニメーションを表現することが可能となります。

<canvas>はHTML5から追加された要素です。発表された当時、インタラクティブなコンテンツを直接扱うことができるようになるため、非常に注目されました。

もともとは、Apple社がSafariの独自拡張として策定した要素でしたが、その利便性が認識されるとMozilla(FireFox)やOpera等のベンダーも追随するようになり、事実上HTMLの標準仕様として認識されるようになっていきました。現在では、WHATWG/W3Cによって正式な仕様として取り入れられ、Internet Explorerを含む主要ブラウザで利用可能となっています。

<canvas>を使いこなすには、ウェブ上に公開されているサンプルやデモを見ながら、実際にコードを触ってみるのが一番の近道です。今では<canvas>に対して、JavaScriptのライブラリやAPIが多数提供されています。実現したいコンテンツのイメージが固まってきたら、用途に合ったリソースを選択していくことで、作業を大幅に省略することが可能な環境になっています。

<canvas>タグの特徴

<canvas>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<canvas>要素は、キャンバスの領域を定義するだけです。内部の描画はJavaScriptで指定します。

<canvas>タグに指定できる属性

width

描画する領域の幅を指定します。

height

描画する領域の高さを指定します。

<canvas>タグの使い方とサンプル

<canvas>のHTML部分は非常にシンプルです。width属性とheight属性で、キャンバスの幅と高さを指定します。<canvas>要素内に記述したコンテンツは、<canvas>要素に対応していないブラウザやスクリプトをオフにしている環境で表示されます。

<canvas id="canvas" width="400" height="400">
このWebブラウザはcanvasの描画に対応していません。
</canvas>