canvasタグの概要
| グラフィックスの描画 HTMLタグ | ||
|
<canvas width=”幅” height=”高さ”></canvas> 概要 |
||
|
canvasタグの基本的な使い方
以下の例では、JavaScriptを使ってキャンバス内に四角形を描画します。
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);
</script>表示例：
線を描画する
キャンバス上に直線を描画する方法を示します。
<canvas id="lineCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("lineCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 150);
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();
</script>表示例：
円を描画する
以下のコードでは、キャンバス内に円を描画します。
<canvas id="circleCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("circleCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "green";
ctx.fill();
</script>表示例：
SEOとアクセシビリティへの影響
- SEO効果:
canvasの内容は検索エンジンには認識されないため、適切な代替コンテンツ（altテキストや説明文）を提供することが推奨される。 - アクセシビリティ:
canvasタグ内にテキストを記述すると、JavaScript未対応の環境でも意味が伝わる。
注意事項
- JavaScriptを使用しないと何も表示されないため、代替テキストを用意することが望ましい。
- 動的に内容を変更する際は、
clearRect()を使用して前の描画をクリアする。 - アニメーションは
requestAnimationFrame()を使用するとスムーズに動作する。
よくある質問
- Q: canvasとSVGの違いは？
- A:
canvasはピクセルベースの描画で、動的な変更が必要な場合に向いている。一方、SVGはベクターグラフィックスで、拡大・縮小時に画質が劣化しない。 - Q: canvasの内容を画像として保存できますか？
- A: はい、
canvas.toDataURL()を使用するとPNGやJPEG形式で保存できます。 - Q: すべてのブラウザで動作しますか？
- A: 主要なモダンブラウザでは対応しているが、IE8以前では動作しない。
まとめ
- canvasタグはJavaScriptと組み合わせてグラフィックスを描画する。
- 線、図形、テキスト、画像、アニメーションなどを描画可能。
- 動的なグラフィックスを作成する場合に適している。
- SEO対策のために代替テキストを提供するのが望ましい。