<canvas>
HTML の <canvas> 要素 と キャンバススクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 2 | 18 | 1 | |
| HTML 属性 | ||||||
height | 1 | 12 | 1.5 | 2 | 18 | 1 |
width | 1 | 12 | 1.5 | 2 | 18 | 1 |
| DOM API | ||||||
| HTMLCanvasElement インターフェイスは、canvas 要素のレイアウトや表示を操作するための属性やメソッドを提供します。HTMLCanvasElement は HTMLElement インターフェイスのプロパティやメソッドも継承しています。 | 1 | 12 | 1.5 | 2 | 18 | 1 |
| HTMLCanvasElement.getContext() メソッドは、描画コンテキストを返します。対応していないコンテキスト識別子であったり、既に別なコンテキストモードが設定されていたりした場合は null になります。 | 1 | 12 | 1.5 | 2 | 18 | 1 |
| HTMLCanvasElement.height プロパティは CSS ピクセル数として解釈される正の整数であり、この canvas 要素の height 属性を反映します。この属性が指定されなかった場合、または負の数など、無効な値をが設定された場合、既定値の 150 が使用されます。 | 1 | 12 | 1.5 | 3 | 18 | 1 |
| HTMLCanvasElement.toBlob() メソッドは、 キャンバスに含まれる画像を表す Blob オブジェクトを生成します。 このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリーに保存されたりすることがあります。 | 50 | 79 | 18 | 11 | 50 | 11 |
| HTMLCanvasElement.toDataURL() メソッドは、 type 引数で指定された形式で画像を表現したものが入った data URL を返します。 | 2 | 12 | 2 | 4 | 18 | 3 |
| HTMLCanvasElement.width プロパティは CSS ピクセル数として解釈される正の整数であり、この canvas 要素の width 属性を反映します。この属性が指定されなかった場合、または負の数など、無効な値をが設定された場合、既定値の 300 が使用されます。 | 1 | 12 | 1.5 | 3 | 18 | 1 |
- Firefox 5 より前のバージョンでは、キャンバスの幅と高さは符号なし整数ではなく符号付き整数でした。
- Firefox 6 以前では、幅または高さが 0 の <canvas> 要素は、デフォルトの寸法があるかのようにレンダリングされました。
- Firefox 12 より前のバージョンでは、JavaScript が無効の場合、<canvas> 要素は仕様に従ってフォールバックコンテンツを表示する代わりにレンダリングされていました。その後、フォールバックコンテンツが代わりにレンダリングされるようになりました。
- Apple の Safari ブラウザの初期バージョンでは閉じタグは必要ありませんが、仕様では必須であることが示されているため、幅広い互換性のために必ず含める必要があります。バージョン 2 より前の Safari では、CSS のトリックを使ってマスクしない限り、キャンバス自体に加えてフォールバックのコンテンツもレンダリングされます。
- Firefox 5 より前のバージョンでは、キャンバスの幅と高さは符号なし整数ではなく符号付き整数でした。
- Firefox 6 以前では、幅または高さが 0 の <canvas> 要素は、デフォルトの寸法があるかのようにレンダリングされました。
- Firefox 12 より前のバージョンでは、JavaScript が無効の場合、<canvas> 要素は仕様に従ってフォールバックコンテンツを表示する代わりにレンダリングされていました。その後、フォールバックコンテンツが代わりにレンダリングされるようになりました。
- Apple の Safari ブラウザの初期バージョンでは閉じタグは必要ありませんが、仕様では必須であることが示されているため、幅広い互換性のために必ず含める必要があります。バージョン 2 より前の Safari では、CSS のトリックを使ってマスクしない限り、キャンバス自体に加えてフォールバックのコンテンツもレンダリングされます。
- Firefox 5 より前のバージョンでは、キャンバスの幅と高さは符号なし整数ではなく符号付き整数でした。
- Firefox 6 以前では、幅または高さが 0 の <canvas> 要素は、デフォルトの寸法があるかのようにレンダリングされました。
- Firefox 12 より前のバージョンでは、JavaScript が無効の場合、<canvas> 要素は仕様に従ってフォールバックコンテンツを表示する代わりにレンダリングされていました。その後、フォールバックコンテンツが代わりにレンダリングされるようになりました。
- Apple の Safari ブラウザの初期バージョンでは閉じタグは必要ありませんが、仕様では必須であることが示されているため、幅広い互換性のために必ず含める必要があります。バージョン 2 より前の Safari では、CSS のトリックを使ってマスクしない限り、キャンバス自体に加えてフォールバックのコンテンツもレンダリングされます。
- このバージョンで機能が削除されました (79)
- ベンダープレフィックス付きで対応: ms (12)
基本構文
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 80);
ctx.fillStyle = '#e74c3c';
ctx.beginPath();
ctx.arc(200, 75, 40, 0, Math.PI * 2);
ctx.fill();
</script>ライブデモ
Draw shapes
Rectangle, circle, triangle draw.color or coordinates Try changing it.. with Canvas API
Gradients and paths
lineargradient and curvelinepath combinationdraw.color changeTry changing it..
実務での使いどころ
-
<canvas> の活用
HTML の <canvas> 要素 と キャンバススクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。