JavaScriptでのCanvasの基本操作
キャンバスは、ブラウザ上でJavaScriptを使って描画を行うための特別な領域です。
この領域は<canvas>タグを使用して作成され、
幅と高さを指定する必要があります:
<canvas width="200" height="200"></canvas>
JavaScriptでこの領域を操作するには、まずこのタグへの参照を 何らかの変数に取得します:
let canvas = document.querySelector('canvas');
次に、この変数に対してgetContextメソッドを
適用する必要があります:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
簡略化することもできます:
let ctx = document.querySelector('canvas').getContext('2d');
結果として、変数ctxには、いわゆる
実行コンテキストを含むオブジェクトが
格納されます。すべての描画はこのオブジェクトの
メソッドを使用して行われます。
そのメソッドの学習が今後のレッスンのテーマとなります。