0

JavaScript初心者です。

下記のようなコードがあったのですが、context.fillStyle = "rgb(" + Math.floor(Math.random() * 256) +","…
の部分で、ランダムで取得される整数の左右になぜ + がついているのかがわかりません。
初歩的な質問かつ、わかりにくい説明かもしれませんが、時間のある方お答えしてもらえるとありがたいです。

<!DOCTYPE html>
<html>
<body>

<canvas id="testCanvasElement" width="200" height="200" onclick="test()" style="background: #0000ff;"></canvas>

<script>

    var cv = document.getElementById("testCanvasElement");
    var context = cv.getContext("2d");

    function test() {

        context.clearRect(0, 0, cv.width, cv.height);

        context.fillStyle = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";

        context.fillRect(0, 0, 100 + Math.floor(Math.random() * 100), 100 + Math.floor(Math.random() * 100));

    }

</script>

</body>
</html>
1
  • ご回答ありがとうございます。"rgb()"が文字列だとわかると簡単に読むことができました。詳しくご説明していただき、大変勉強になりました。
    – 山田桃
    Commented 2020年3月16日 14:35

1 件の回答 1

0

fillStyleに代入する色の値は文字列で指定するものだからでしょう。
乱数で値を生成するので無ければ以下のようにまとまった文字列になります。
質問のように値を乱数で生成するならば、それを文字列に変換して、以下の形になるように、+で連結する必要があります。(この+は数値の加算では無く文字列の連結を表しています)

(太字は引用者)
スタイルと色を適用する


fillStyle = color
 図形の塗りつぶしのスタイルを記述する

The valid strings you can enter should, according to the specification, be CSS <color> values. Each of the following examples describe the same color.

入力できる有効な文字列は、仕様に従って、CSS <color>値である必要があります。 次の各例では、同じ色を説明しています。

ctx.fillStyle = "rgb(255,165,0)";

一方fillRectへの指定は数値なので、乱数で生成した値を有効範囲に収めてそのまま使えます。
(質問でのこちらの+は数値の加算ですね)

CanvasRenderingContext2D.fillRect()

文法
void ctx.fillRect(x, y, width, height);

ctx.fillRect(10, 10, 100, 100);

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。