HTML5 Canvas - 사각형의 색상이 항상 검은 색으로 표시되는 이유는 무엇입니까?

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); 
} 

하지만, 때마다, 색상은 적색, 청색 또는 녹색 있지만 색이 지속적으로 검은 색 중 하나를 변경해야합니다.

왜 이런 일이 발생합니까? 내 코드에서 무엇이 잘못 되었습니까?

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/