63887


JavaScript初心者です。

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

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2020-03-16T05:04:30.623
63885
2020-03-16T05:49:45.583
38234
question
javascript
Canvasで色をランダム取得する際での疑問です。


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

(太字は引用者)  
[スタイルと色を適用する](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors)

> 色  
>  fillStyle = color  
>  図形の塗りつぶしのスタイルを記述する
>
> The valid strings you can enter should, according to the specification, be
> CSS [<color>](https://developer.mozilla.org/ja/docs/Web/CSS/color_value)
> values. Each of the following examples describe the same color.
>
> **入力できる有効な文字列は、仕様に従って、CSS <color>値である必要があります。** 次の各例では、同じ色を説明しています。
>
> ctx.fillStyle = "rgb(255,165,0)";

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

[CanvasRenderingContext2D.fillRect()](https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/fillRect)

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


CC BY-SA 4.0
2020-03-16T05:29:33.937
63887
2020-03-16T05:49:45.583
2020-03-16T05:49:45.583
26370
26370
63885
answer