JavaScript»基礎»配列 配列としてならんでいる数を画像で表示する

ファイル名: js-basic/quest_00325.html

下のソースコードをうつして、配列はいれつとしてならんでいる数 0, 7, 4, 4, 2, 9, 1, 0, 4, 3 を画像がぞうでキャンバスに表示ひょうじしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "mes01_f01_d01_c04_02.png";
image.onload = function() {

  const numbers = [0, 7, 4, 4, 2, 9, 1, 0, 4, 3];
  
  numbers.forEach(function(num, i) {
    context.drawImage(image, num * 60, 0, 60, 60, i * 32, 144, 32, 32);
  });
};

解説

配列はいれつとは、リストのようなものです。
このコードでは、8行目で配列はいれつを作り、10~12行目で配列はいれつの値と番号を順番に引数にして関数を実行しています。