HTML要素 ・ メディア
<canvas>
スクリプトで描画する領域
JavaScriptを使って、図形・グラフ・アニメーションなどを描くための領域です。canvas だけでは何も表示されません。
01
サンプルコード
HTML
1<canvas id="chart" width="300" height="120">
2 売上の棒グラフ
3</canvas>
4<script>
5 const ctx = document.getElementById('chart').getContext('2d');
6 const data = [40, 70, 55, 90];
7 data.forEach((v, i) => {
8 ctx.fillStyle = '#b68235';
9 ctx.fillRect(20 + i * 70, 110 - v, 40, v);
10 });
11</script>
CSS
1canvas {
2 border: 1px solid #ddd;
3}
02
実行結果
ブラウザでの表示
03
解説
canvas は、JavaScriptで絵を描くための「キャンバス（画用紙）」です。getContext('2d') で描画用の道具を取り出し、四角形や線、文字などを描きます。
width と height 属性で描画領域の大きさを決めます。CSSで大きさを変えると、絵が引き伸ばされてぼやけることがあります。
描いた内容は画像として扱われ、中の文字や図形を読み上げソフトが理解することはできません。タグの間に代わりの説明を書いておきます。
04
応用例・注意点
よく使う描画メソッド
| メソッド | 説明 |
|---|---|
fillRect(x, y, w, h) | 塗りつぶした四角形を描く |
strokeRect(x, y, w, h) | 枠線だけの四角形を描く |
fillText(文字, x, y) | 文字を描く |
beginPath() / arc() | 円や曲線を描く |
clearRect(x, y, w, h) | 指定範囲を消す |
円を描く
arc で円の道筋を作り、fill で塗りつぶします。
HTML
1<canvas id="c" width="100" height="100"></canvas>
2<script>
3 const ctx = document.getElementById('c').getContext('2d');
4 ctx.beginPath();
5 ctx.arc(50, 50, 40, 0, Math.PI * 2);
6 ctx.fillStyle = '#e1ad66';
7 ctx.fill();
8</script>
注意点
- 01アイコンや図など、拡大しても劣化させたくない絵は svg のほうが向いています。
- 02canvas の内容は読み上げられません。重要な情報は文章でも伝えます。