このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

canvas要素:スクリプトによる描画領域HTML5で追加

記事Sep. 28th, 2020
スクリプトによる描画領域を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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 context = samplecanvas.getContext('2d');
context.strokeStyle = "rgb(28,20,15)";
context.lineWidth = 10;
context.strokeRect(50,20,160,160);
</script>
スクリプトが有効な環境ではここに図形が表示されます。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
width="" 描画域の横幅 正の整数 描画域の横幅のピクセル数
height="" 描画域の高さ 正の整数 描画域の高さのピクセル数

要素の内容

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

  1. a”要素
  2. usemap”属性を指定したimg”要素
  3. button”要素
  4. type”属性の値にradiocheckboxsubmitresetimagebuttonを指定したinput”要素
  5. size”属性の値が“2”以上、もしくはmultiple”属性を指定したselect”要素

仕様書

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

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<canvas>
定義なし

定義あり

定義あり

定義あり

定義あり
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク