2D canvas
CanvasRenderingContext2D は <canvas> 要素の2D描画コンテキストです。図形、テキスト、画像の描画に使用します。
概要
CanvasRenderingContext2D は <canvas> 要素の2D描画コンテキストです。図形、テキスト、画像の描画に使用します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 2+
Firefox 1.5+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
JAVASCRIPT
<canvas id="c" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = '#005A9C';
ctx.fillRect(10, 10, 180, 80);
</script>実務での使いどころ
-
2D canvas の活用
2D描画コンテキスト。Canvas要素上に図形やテキストを描画するAPI。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。