canvas
<canvas> は HTML 文書内に画像を生成するための領域を作成します。
- 分類
- フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、知覚可能コンテンツ
- 内包できるもの
- 透過コンテンツ
属性
領域の幅
width 属性は canvas の領域の幅を指定することができます。指定しない場合、既定値では 300px の幅が適用されます。
領域の高さ
height 属性は canvas の領域の高さを指定することができます。指定しない場合、既定値では 150px の高さが適用されます。
サンプル
<canvas> タグによって作成されるのはグラフィックスを描画するための領域です。つまり文字通り白紙のカンバス（キャンバス）です。ここに Javascript 等を使用し内容を描画していきます。<img> ようにすでに生成された画像を読み込むのと違い、ユーザーの操作に合わせて画像を変形させることも可能です。
サンプルでは <canvas> に id=”canvas001″ を指定し、それを Javascript で読み込み関連付けをしています。
<canvas width="300" height="200" id="canvas001">
</canvas>
<script>
var canvas = document.getElementById('canvas001');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 20, 150, 100);
</script>プレビュー
注意点
代替コンテンツを指定する
Javascript が読み込めない状況やそもそも canvas に対応していない Web ブラウザを考慮し、代替コンテンツを準備しておきましょう。<canvas> が読み込めなかったことを通知するメッセージでも良いですし、<img> で代わりの画像を読み込んでも良いでしょう。
<canvas width="300" height="200" id="canvas001">
<p>現在ご利用の環境では画像を読み込むことができませんでした。</p>
</canvas>終了タグが必要
<img> とは異なり <canvas> には終了タグが必要です。上記の代替コンテンツは <canvas></canvas> 内に指定します。