このセクションではcanvasAPIの描画コンテキストを取得して背景の描画をします。

コンソールの表示

エラーなどを確認するためにChromeのコンソールを表示します。Chrome上でCtrl+Shift+Jを押すと以下の画像のようにコンソールが表示されます。

確認用背景の削除

前回canvas要素の位置と大きさを確認するために書いたstyle.cssの4行目のbackground-color: yellowgreen;を削除します。変更後のstyle.cssは以下のようになります。

canvas {
  display: block;
  margin: 80px auto;
}

canvas {
  display: block;
  margin: 80px auto;
}

描画コンテキストの取得

canvas要素とcanvasAPIの描画コンテキストを変数で取得します。jump_gameフォルダーにあるmain.jsを次のように編集します。

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

cvsという変数にquerySelector()でcanvas要素を代入して、ctxという変数にcanvasの描画コンテキストを代入します。

背景の描画

背景の色を保持する定数BACKGROUND_COLORと、背景を描画するdraw_background関数を作成して、draw_background関数を実行します。

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

// 色
const BACKGROUND_COLOR = "hsl(200deg, 100%, 70%)";

// 背景の描画
function draw_background() {
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(0, 0, cvs.width, cvs.height);
}

draw_background();

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

// 色
const BACKGROUND_COLOR = "hsl(200deg, 100%, 70%)";

// 背景の描画
function draw_background() {
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(0, 0, cvs.width, cvs.height);
}

draw_background();

今回のレッスンでは色を統一感が調整しやすいhslで設定します。また背景の描画はfillRect()を使用し、幅と高さの引数にcvs.widthとcvs.heighを使用します。

実行結果

Chromeに移動してindex.htmlを更新します。実行結果は以下の画像のようになります。