HTML5キャンバス - なぜ矩形の色が常に黒を返しますか？

Question

私はキャンバスの四角形を描画し、その色が変化するたびに色を変えたいと考えています。ここに私のコードは次のとおりです。

しかし

window.onload = function() { 
    var can = document.getElementById("lol"); 
    var ctx = can.getContext("2d"); 
    var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)"]; 

    ctx.fillStyle = colors[Math.random() * 3]; 
    ctx.fillRect(40,40,30,25); 
} 

、私は、Webページを開くたびに、色は、赤、青、緑のいずれかに変更する必要がありますが、色が持続的に黒です。

これはどうしてですか？私のコードで何が間違っていますか？

Answer 1

あなたは正しく乱数を選んでいません。あなたのランダム関数は決して整数を返すことはほとんどありません。ここで

Read more about Math.random here.

は、あなたが何をしようとしてです：

var can = document.getElementById("lol"); 
 
var ctx = can.getContext("2d"); 
 
var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)"]; 
 

 
ctx.fillStyle = colors[Math.floor(Math.random() * 3)]; 
 
ctx.fillRect(40,40,30,25);

<canvas id="lol"></canvas>

Answer 2

あなたは配列の要素にアクセスするための整数値を取る必要があります。

ctx.fillStyle = colors[Math.floor(Math.random() * 3)]; 

私は、乱数（要素の数が、後に変更された場合、一定vaueは間違って行くこと）のための要因として、配列の長さを使用することをお勧めします。

ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]; 

Answer 3

これを試してみてください：ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]; https://jsfiddle.net/xpavwkod/