HTML5におけるCanvas要素とは、どのようなものですか？
HTML5におけるCanvas要素とは
概要
Canvas要素（<canvas>）は、HTML5で導入された要素で、JavaScriptを使って動的にグラフィックや図形を描画するための領域（キャンバス）を提供するものです。
主な特徴
-
ビットマップ（ラスター）描画
- ピクセル単位で画像を描画する方式です。
- 描画後は「絵の具を塗った」状態となり、個々の図形オブジェクトとして保持されません（SVGとの大きな違い）。
-
JavaScriptによる制御
- HTMLでは描画領域（箱）を用意するだけで、実際の描画はJavaScriptの描画コンテキスト（Context）を通じて行います。
- 代表的なコンテキスト:
2d（2次元描画）webgl/webgl2（3次元描画、GPUを利用）
-
用途
- グラフやチャートの表示
- ゲーム開発（2D/3Dグラフィック）
- 画像の加工・合成
- アニメーション表現
- データのビジュアライゼーション
基本的な書き方の例
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 四角形を描く
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 80);
</script>SVGとの違い
| 項目 | Canvas | SVG |
|---|---|---|
| 描画方式 | ラスター（ビットマップ） | ベクター |
| 操作単位 | ピクセル | 図形オブジェクト（DOM） |
| 拡大時 | 粗くなる | 劣化しない |
| 得意分野 | ゲーム・多数の描画・画像処理 | 図形・アイコン・UI |
注意点
width/heightはCSSではなく要素の属性で指定するのが基本です（CSSで指定すると描画が引き伸ばされて歪むため）。- 描画内容はDOMに残らないため、要素単位のクリック判定などは自前で座標計算する必要があります。
参考資料
[developer.mozilla.org]https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
[developer.mozilla.org]https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
元記事へ
[moelog.com] https://www.moelog.com/roみたいなカウンターhtml5化完了/
[moelog.com] https://www.moelog.com/roみたいなカウンターhtml5化完了/
AI回答の内容は正しいと思いますか？
—
—
—
