canvas 要素グラフィック描写領域を提供する
canvas 要素は、スクリプトによって動的にグラフィックを描写可能なビットマップキャンバスを提供します。例えば、グラフを描写したり、ゲームなどのビジュアルイメージをその場でレンダリングするために使用したりできます。
グラフィックを描写できるといっても、canvas 要素以外に適切な要素が利用できるなら文書内で canvas 要素を使うべきではありません。例えばページの見出しをグラフィカルに表示したいからといって canvas 要素を使ったりはせず、見出し要素と、CSS、画像などの組み合わせでレンダリングするべきでしょう。
なお、canvas 要素は描写領域を提供するだけで実際の描写は JavaScript によって行われます。つまり、JavaScript が無効の環境では使用することができません。また、canvas 要素の内容は、canvas 要素に対応していない環境に対するフォールバックコンテンツとして機能します。
canvas 要素の仕様
- カテゴリ
- コンテンツモデル
-
ただし、a 要素、usemap 属性を持つ img 要素、button 要素、type 属性が checkbox、radio、button のいずれか状態にある input 要素、multiple 属性、または「1」以上の size 属性値を持つ select 要素、および要素に tabindex 属性が指定されている場合を除き、インタラクティブコンテンツを子孫に持つことは不可。
- この要素を使用できる文脈
エンベッディッド・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
ブラウザのサポート状況
| Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| ○ 1.0～ | ○ 1.5～ | ○ 9.0～ | ○ 9.0～ | ○ 2.0～ |
IE8 以前で canvas 要素を使用する
旧式の IE （Internet Explorer） で canvas 要素を有効にするポリフィルとして、Google が公開した 「ExplorerCanvas」 という JavaScript ライブラリを利用することができます。
canvas 要素のサンプルソース
<!-- 基本的な使い方です。緑色の線で四角形を描写しています -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas 描写テスト</title>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ct = canvas.getContext('2d');
ct.strokeStyle = '#009900';
ct.strokeRect(50, 50, 200, 200);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
<!-- canvas 要素に対応しないブラウザへのフォールバックを提供します --> <canvas id="canvas" width="500" height="500"> <p>canvas 要素に対応したブラウザの場合、ここには2013年度のブラウザシェアに関する円グラフが表示されています。</p> <p>下記の画像はグラフを画像で表示したものですが、データの反映は canvas 要素版に比べて遅くなります。</p> <p><img src="/img/browser.png" alt="2013年度のブラウザシェアに関する円グラフ" /></p> </canvas>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |