<canvas>図形を描画する

<canvas>タグは、動的な図形を描画する際に使用します。 例えば、グラフやゲームの画像など、解像度依存のグラフィックをその場で出力する事などができます。

またダイナミックなアニメーション以外にも、ユーザーの環境やログイン状況、またはテキストに合わせて動的に変化させたい時に使用します。 ですが、単なる静止画像を表示させたいのであれば、img要素などの要素を利用するべきでしょう。

canvas要素での描画は、JavaScriptなどのスクリプトで指定します。 ですがcanvas要素自身は、キャンバスの領域を出力するだけとなるため、そこにどのような画像を表示するかは、id属性を利用して、別途スクリプトが必要になります。

canvas要素の幅と高さはwidth属性とheight属性で指定します。 指定しない場合の初期値は、それぞれ300、150となります。

また<canvas>~</canvas>内にコンテンツを入れる事で、<canvas>に対応していないブラウザなどのためのフォールバックとして表示させる事ができます。

※記述したコンテンツは、サポートされてない環境時に表示されます。

なお他に適切な要素がある場合は、canvas要素は使うべきではありません。

HTML5での変更点

canvas要素は、HTML5から追加されました

書式

  • <canvas 属性="値">~</canvas> ……… グラフィック描画用のキャンバス

属性

width="" キャンバスの幅をピクセル数で指定
height="" キャンバスの高さをピクセル数で指定

使用した時の例

<canvas id="canvas">
<p>canvasに対応していません。</p>
</canvas>

<script>
window.onload = function() {
  var cv = document.getElementById('canvas');
    if (!cv) { return; }

  var ctx = cv.getContext('2d');
    if (!ctx) { return; }

  // 塗りつぶし
  ctx.fillStyle = '#CCE5FF';
    ctx.fillRect(0, 0, cv.width, cv.height);  

  // 半円
  ctx.beginPath();
    ctx.strokeStyle = '#BF7FFF';
    ctx.arc(150, 50, 70,  Math.PI*1,Math.PI*2, true);
    ctx.stroke();
}
</script>

ブラウザ上の表示例

canvasに対応していません。

対応ブラウザなどのデータ

形式 <canvas>~</canvas> カテゴリ フローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, パルパブルコンテンツ
親要素 エンベデッドコンテンツが期待される場所 子要素 トランスペアレント
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~