ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
エンベッテッド・コンテント
親にできる要素 エンベッテッド・コンテンツが期待される場所
子にできる要素 トランスペアレント
対応ブラウザ <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>要素に対応していないブラウザやスクリプトをオフにしている環境で表示されます。

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

<canvas>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する