概要：このチュートリアルでは、HTML キャンバスと、JavaScript を使用してキャンバスに描画する方法について学習します。
HTML5 キャンバス要素の紹介
HTML5 は、JavaScript を使用して 2D グラフィックを描画できる<canvas>要素を備えています。
<canvas>要素には、キャンバスのサイズを指定するwidth属性とheight属性が少なくとも2つ必要です。
<canvas width="500" height="300" id="canvas"></canvas>Code language: HTML, XML (xml)他の要素と同様に、DOM プロパティを介して<canvas>要素のwidthプロパティとheightプロパティにアクセスできます。
const canvas = document.querySelector('#canvas');
const width = canvas.width;// 500
const height = canvas.height;// 300Code language: JavaScript (javascript)また、DOM メソッドを使用して<canvas>要素のwidthとheightを変更することもできます。
canvas.width = 600;
canvas.height = 400;フォールバックコンテンツ
<img>要素とは異なり、<canvas>要素には閉じタグ</canvas>が必要です。開始タグと終了タグの間のコンテンツは、ブラウザが<canvas>要素をサポートしていない場合にのみ表示されるフォールバックコンテンツです。例：
<canvas width="500" height="300" id="canvas">The browser doesn't support the canvas element</canvas>Code language: HTML, XML (xml)現在、ほとんどの最新のWebブラウザは<canvas>要素をサポートしています。
レンダリングコンテキスト
最初は、キャンバスは空白です。何かを描画するには、レンダリングコンテキストにアクセスし、それを利用してキャンバスに描画する必要があります。
<canvas>要素には、レンダリングコンテキストオブジェクトを返すgetContext()メソッドがあります。
getContext()は、コンテキストの種類を指定する引数を1つ取ります。たとえば、2D レンダリングコンテキストオブジェクト（CanvasRenderingContext2Dインターフェースのインスタンス）を取得するには"2d"を使用します。
2D レンダリングコンテキストを使用すると、図形、テキスト、画像、その他のオブジェクトを描画できます。
次の例は、querySelector()メソッドを使用してキャンバス要素を選択し、そのgetContext()メソッドを呼び出して描画コンテキストにアクセスする方法を示しています。
let canvas = document.querySelector('#canvas');
let ctx = main.getContext('2d');Code language: JavaScript (javascript)キャンバスサポートの確認
<canvas>要素を使用する場合は、ブラウザがgetContext()メソッドをサポートしているかどうかを確認することが重要です。そのためには、次のコードを使用します。
let canvas = document.querySelector('#main');
if(canvas.getContext) {
let ctx = main.getContext('2d');
}Code language: JavaScript (javascript)2Dコンテキスト
2D描画コンテキストは、パス、長方形、円弧などの単純な2D図形を描画するためのメソッドを備えています。
2Dコンテキストの座標は、<canvas>要素の左上に始まります。これは、次の図に示すように、点(0,0)です。
すべての座標値は、(0,0)を基準に計算されます。xは右に増加し、yは下に増加します。
デフォルトでは、widthとheightは、各方向で使用可能なピクセル数を決定します。
塗りつぶしとストローク
塗りつぶしとストロークは、2D描画コンテキストにおける2つの基本的な描画操作です。
- 塗りつぶしは、色、グラデーション、画像などの特定のスタイルで図形を塗りつぶします。
- ストロークは、図形の縁に色を追加します。
2D描画コンテキストのfillStyleプロパティとstrokeStyleプロパティは、塗りつぶしとストロークのスタイルを決定します。
これらのプロパティは、文字列、グラデーションオブジェクト、またはパターンオブジェクトに設定できます。デフォルトでは、どちらも'#000000'に設定されています。
次の例は、2D描画コンテキストの塗りつぶしとストロークのスタイルを設定し、長方形を描画する方法を示しています。
(() => {
const canvas = document.querySelector('#main');
if (!canvas.getContext) {
return;
}
// get the context
let ctx = canvas.getContext('2d');
// set fill and stroke styles
ctx.fillStyle = '#F0DB4F';
ctx.strokeStyle = 'red';
// draw a rectangle with fill and stroke
ctx.fillRect(50, 50, 150, 100);
ctx.strokeRect(50, 50, 150, 100);
})();Code language: JavaScript (javascript)長方形の描き方については、後のチュートリアルで学習します。
まとめ
- 2D グラフィックを描画するには、HTML5 キャンバス要素を使用します。
- キャンバス上に 2D グラフィックを描画するには、
getContext('2d')を使用して 2D 描画コンテキストを取得します。 - 2D 描画コンテキストのスタイルを設定するには、
fillStyleプロパティとstrokeStyleプロパティを使用します。
