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);
};

解説

今回、引数を3つ設定しています。
それぞれ、

num:表示させる数字
x:表示させる位置(x座標)
y:表示させる位置(y座標)

を決めています。引数がどのような処理に使われているかを確認しながら
記述していきましょう。