<canvas>タグの解説
<canvas>は、スクリプトで定義されたグラフィックやアニメーションを表示する領域を作成します。これを使えば、画像やプラグインを使わずにJavaScriptで図形やアニメーションを表現できます。
<canvas>は、名前の通り絵を描くための範囲を定義する要素です。ここに表示される内容は、Canvas APIの仕様に従いJavaScriptで作成します。スクリプトが実行されない限り、<canvas>は何も表示されない無地の面積を確保するだけです。
<canvas>を使いこなすには、ウェブ上に公開されているサンプルやデモを見ながら、実際にコードを触ってみるのが一番の近道です。<canvas>に対応するJavaScriptのライブラリやAPIが多数提供されています。実現したいコンテンツのイメージが固まってきたら、用途に合ったリソースを選択していくことで、作業を大幅に省略することが可能な環境になっています。
<canvas>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
- この要素はキャンバスの領域を指定するだけです。内部の描画はJavaScriptで定義します。
<canvas>要素に指定できる属性
width- キャンバスの幅を単位なしのピクセル値で指定します。初期値は
"300"です。 height- キャンバスの高さを単位なしのピクセル値で指定します。初期値は
"150"です。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<canvas>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<canvas>自体のマークアップは非常にシンプルです。width属性とheight属性でキャンバスの幅と高さを指定し、id属性で固有の名称を与えます。また、<canvas>に対応していないブラウザやスクリプトをオフにしている環境のために、代替テキストを用意しておきましょう。
<canvas id="sample" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>
これで絵を描く前のキャンバスを用意することができました。しかし、このままでは何も表示されない空の領域が確保されただけです。そこで、<canvas>に描画する内容をJavaScriptで定義します。
<canvas id="sample_1" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
// canvasのidに対して2Dグラフィックの描画を開始
const sample_1 = document.getElementById('sample_1');
const item1 = sample_1.getContext('2d');
// 長方形を定義して塗る
item1.fillStyle = '#00CCFF';
item1.fillRect(10, 10, 150, 100);
</script>
このように書くと、幅240px・高さ160pxのキャンバスの中に、150×100pxの長方形が描画されます。その図形を左辺から10px、上辺から10pxの位置に配置するように指定しています。
上記の例から分かるように、キャンバスと図形はレイヤー状に重なっています。これを何枚も重ねて複雑な図形を描画することも可能です。
<canvas id="sample_2" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
// canvasのidに対して2Dグラフィックの描画を開始
const sample_2 = document.getElementById('sample_2');
const item2 = sample_2.getContext('2d');
// 長方形を定義して塗る
item2.fillStyle = '#00CCFF';
item2.fillRect(10, 10, 150, 100);
// 円を描画する
item2.beginPath();
item2.strokeStyle = '#EECC00';
item2.arc(120, 80, 40, 0, 2 * Math.PI, false);
item2.lineWidth = 5;
item2.stroke();
// 線を引く
item2.beginPath();
item2.strokeStyle = '#0000FF';
item2.moveTo(0, 0);
item2.lineTo(240, 160);
item2.lineWidth = 2;
item2.stroke();
</script>