“canvas”要素:スクリプトによる描画領域

要素について

“canvas”要素はスクリプトによる描画を行うためのキャンバスを表します。

Canvas APIによる2DグラフィックやWebGL APIによる3Dグラフィックを描画することができ、グラフやゲームのグラフィック、アートやその他の視覚表現を描画するための領域として使用することができます。

HTML5で新しく追加された要素です。今までは視覚コンテンツを表示するためにはJPEGやPNGといった画像ファイルを用意する必要があり、また条件によって変化する視覚コンテンツを実装するにはFlashなどのプラグインが必要でした。しかし、“canvas”要素を使用するとプラグインを使用せずにスクリプトで視覚コンテンツを描画することができるようになりました。

“canvas”要素に描画するスクリプトは“id”属性などで“canvas”要素と関連付けます。

“canvas”要素の中に“canvas”要素へ描画されるものと同等の内容、もしくはその代わりとなる内容を配置することが推奨されます。

“canvas”要素に文字を描画することも可能ですが、描画される内容は単なる画像として認識されます。そのため意味合いを持たせるべき場面、例えばヘッダーなどをデザインするために使用されるべきではありません。

サンプルコード

<canvas id="samplecanvas" width="260" height="200">

スクリプトが有効な環境ではここに図形が表示されます。

</canvas>

<script>

var samplecanvas = document.getElementById('samplecanvas');
var square = samplecanvas.getContext('2d');
square.strokeStyle = "rgb(220,140,200)";
square.lineWidth = 20;
square.strokeRect(50,20,160,160);

</script>

スクリプトが有効な環境ではここに図形が表示されます。

属性と値

要素の内容

“canvas”要素のコンテンツ・モデルはトランスペアレント・コンテンツ・モデルです。ただし、以下の要素を除いてインタラクティブ・コンテンツは配置することができません。

• “a”要素
• “usemap”属性を指定した“img”要素
• “button”要素
• “type”属性の値に“radio”、“checkbox”、“submit”、“reset”、“image”、“button”を指定した“input”要素
• “size”属性の値が“2”以上、もしくは“multiple”属性を指定した“select”要素

仕様書

“canvas”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<canvas>

width=""
height=""