JavaScript»基礎»関数 指定した数を画像で表示する関数

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

下のソースコードをうつして、指定した数字の画像がぞうを、指定した位置いち表示ひょうじする関数かんすうをつくり、それをつかっていくつかの数字をキャンバスにかいてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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 drawNumber = function(num, x, y) {
    context.drawImage(image, num * 60, 0, 60, 60, x, y, 60, 60);
  };
  
  drawNumber(2, 40, 130);
  drawNumber(0, 100, 130);
  drawNumber(1, 160, 130);
  drawNumber(7, 220, 130);
};

解説

引数ひきすうを変えて関数かんすうを実行することで、ちがう結果が返ってきます。