![この記事はHTML Living Standardに対応しています。](../../../s-utilities/image/article/ha-artinfo-htmlls-pc.png)
![この記事はHTML Living Standardに対応しています。](../../../s-utilities/image/article/ha-artinfo-htmlls-sp.png)
#
要素について
カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、パルパブル・コンテンツ |
利用場所 | エンベディッド・コンテンツが置ける場所 |
内容 | 本文参照 |
タグの省略 | 不可 |
“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でも定義されています。
DOMインターフェース
typedef (CanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext) RenderingContext;
[Exposed=Window]
interface HTMLCanvasElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
RenderingContext? getContext(DOMString contextId, optional any options = null);
USVString toDataURL(optional DOMString type = "image/png", optional any quality);
undefined toBlob(BlobCallback _callback, optional DOMString type = "image/png", optional any quality);
OffscreenCanvas transferControlToOffscreen();
};
callback BlobCallback = undefined (Blob? blob);
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
/* なし */