<canvas>: グラフィックキャンバス要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML の <canvas>
要素 と キャンバススクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 |
透過的コンテンツ、ただし子孫に対話型コンテンツのうち <a> 要素,
<button> 要素, <input>
要素の type 属性が
checkbox , radio ,
button のいずれか以外を含まないもの
|
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLCanvasElement |
属性
他のすべての HTML 要素と同様に、グローバル属性を持ちます。
height
-
CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。
moz-opaque
Non-standard 非推奨-
canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された
canvas.getContext('2d', { alpha: false })
を使用してください。 width
-
CSS ピクセルで示した座標空間の幅。既定では 300 ピクセルに設定されています。
使用上の注意
代替コンテンツ
<canvas>
のブロックの中で、代替コンテンツを提供すべきです。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。
</canvas> タグが必要
CSS と HTML におけるキャンバスの寸法指定の違い
表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。
キャンバスの寸法は、HTML または JavaScript を用いて width
および height
属性を <canvas>
要素に直接設定するした方がいいでしょう。
キャンバスの最大寸法
<canvas>
要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源(Stack Overflow など)から収集したいくらかのデータです。
ブラウザー | 最大高 | 最大幅 | 最大面積 |
---|---|---|---|
Chrome | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (つまり 16,384 x 16,384) |
Firefox | 32,767 pixels | 32,767 pixels | 472,907,776 pixels (つまり 22,528 x 20,992) |
Safari | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (つまり 16,384 x 16,384) |
IE | 8,192 pixels | 8,192 pixels | ? |
メモ: 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。
例
HTML
このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。
<canvas width="300" height="300">
キャンバスの表示内容を説明する代替テキストです。
</canvas>
JavaScript
それから JavaScript コード内で HTMLCanvasElement.getContext()
を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
結果
アクセシビリティの考慮
代替コンテンツ
<canvas>
要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。
仕様書
Specification |
---|
HTML Standard # the-canvas-element |
ブラウザーの互換性
BCD tables only load in the browser