JavaScript»基礎»関数 ランダムな色を返す関数

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

下のソースコードをうつして、色をあらわす文字列をランダムに返す関数かんすうをつくり、それをつかっていくつかの図形をキャンバスにかいてください。

ソースコード

const randomColor = function() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return "rgb(" + r + ", " + g + ", " + b + ")";
};

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

context.fillStyle = randomColor();
context.fillRect(40, 20, 80, 80);

context.fillStyle = randomColor();
context.beginPath();
context.arc(240, 160, 40, 0, Math.PI * 2);
context.fill();

context.fillStyle = randomColor();
context.beginPath();
context.moveTo(80, 200);
context.lineTo(20, 300);
context.lineTo(120, 280);
context.closePath();
context.fill();

解説

1~6行目で作った関数かんすうrandomColorをくりかえし使っています。このように、関数かんすうは何度でもくりかえし使うことができます。
呼び出す度に実行するのでMath.random()は毎回違う数字を返しています。