HTML5 Canvas - почему цвет прямоугольника всегда возвращается черным?

Question

HTML5 Canvas - почему цвет прямоугольника всегда возвращается черным?

1

Я хочу нарисовать прямоугольник canvas, который меняет цвет на каждую нагрузку. Вот мой код:

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

Тем не менее, каждый раз, когда я открываю веб-страницу, цвет должен быть изменен либо на красный, синий или зеленый, но на цвет постоянно черный.

Почему это происходит? Что не так в моем коде?

filip204 02 дек. 2017, в 20:08

Источник

1

Ваша случайная рутина редко возвращает целое число
JMP 02 дек. 2017, в 18:22

Теги:

javascript

html5

canvas

random

3 ответа

2

Вам нужно принять целочисленное значение для доступа к элементу массива.

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

Я предлагаю использовать длину массива как фактор для случайного числа (постоянная вауа может пойти не так, если количество элементов изменится позже).

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

Nina Scholz 02 дек. 2017, в 15:58

1

Попробуйте это: ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]; https://jsfiddle.net/xpavwkod/

DSCH 02 дек. 2017, в 15:41

Ещё вопросы

Ваша случайная рутина редко возвращает целое число

Eli Richardson · Accepted Answer · 2017-12-02T15-59-00.000Z

Вы не правильно выбираете случайное число. Ваша случайная функция вряд ли когда-либо вернет целое число.

Узнайте больше о Math.random здесь.

Вот что вы пытаетесь сделать:

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>