HTML5におけるCanvas要素とは、どのようなものですか？
HTML5におけるCanvas要素について
概要
Canvas要素（<canvas>） とは、HTML5で導入された、JavaScriptを用いて画面上に動的にグラフィックを描画するための要素です。
主な特徴
-
ビットマップ（ラスター）ベースの描画
- ピクセル単位で図形や画像を描画します。
- SVGがベクター形式であるのに対し、Canvasはビットマップ形式です。
-
JavaScriptによる制御
<canvas>要素自体は「描画領域（キャンバス）」を用意するだけで、実際の描画はJavaScriptのAPIを通じて行います。- 主に Canvas 2D Context（2次元描画）を利用します。
-
描画できる内容
- 直線・矩形・円などの図形
- 画像の表示・加工
- テキスト
- アニメーション
- グラフやゲームのグラフィックなど
基本的な使い方
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50); // 赤い矩形を描画
</script>補足事項
width/height属性：キャンバスの実際の描画解像度を指定します（CSSのサイズ指定とは意味が異なる点に注意）。getContext("2d")：2D描画用のコンテキストを取得します。3D描画には WebGL（getContext("webgl")）を利用します。- アクセシビリティ：Canvasの内容は基本的にスクリーンリーダーで読めないため、代替テキストや併用が推奨されます。
SVGとの比較
| 項目 | Canvas | SVG |
|---|---|---|
| 形式 | ビットマップ | ベクター |
| 拡大 | 画質が劣化 | 劣化しない |
| 制御 | JavaScript中心 | DOM/XML中心 |
| 適した用途 | ゲーム、多数の描画 | アイコン、図表 |
参考資料
[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回答の内容は正しいと思いますか？
—
—
—
