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行目で関数を作成しています。また、今回は引数を必要としていないため、()内は何も記述していません
関数の処理内容は

・0~255までのランダムな整数を3個作る
・文字列”rgb(上記で作ったランダムな整数3つ)”を”return”する

となっております。この関数を”fillStyle”に使用してあげることでランダムな色に変化させることが出来ます。

さらに今回、同じ関数を複数回呼び出しています。
関数は呼び出されるたびに処理を行うため、毎回違う色を作り出します。
結果、それぞれの図形で違う色になります。