Рандомизировать RGB в холсте HTML5 с новым значением для каждого fillRect с помощью Javascript

Мой текущий код для рандомизации rgb был помещен в переменную cr (цветная случайная)

var cr = 'rgb('+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+')';

Я отправил переменную в элемент холста fillstyle для размещения цвета:

ctx.fillStyle = cr;

Исходящее fillRect рандомизируется, как и ожидалось. Текущий код:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

var cr = 'rgb('+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+')';

  ctx.fillStyle = cr;
  ctx.fillRect(0, 210 , 100 ,290);

Проблема возникает, когда я пытаюсь поместить ее в новый fillRect(). Например:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

var cr = 'rgb('+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+','+
      Math.floor(Math.random()*256)+')';

  ctx.fillStyle = cr;
  ctx.fillRect(0, 210 , 100 ,290);

  ctx.fillStyle = cr;
  ctx.fillRect(100, 210, 100, 290);

Новый ctx.fillStyle использует тот же случайный цвет. Я хотел бы, чтобы новый fillRect имел новый случайный цвет (делая крутой эффект горизонта, поэтому, возможно, еще 20 или более из них). Возможно, мне нужно поместить цикл в массив, рандомизировать его и использовать для каждого нового fillRect. Любые решения были бы очень благодарны:)

Ответы

Ответ 1

Поздний ответ, но просто установите стиль случайного цвета с помощью HSL:

ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

Это создаст случайный цвет с одинаковой насыщенностью и интенсивностью света (яркость).

Ответ 2

Я не знаю, сколько прямоугольников в каком порядке вы хотите нарисовать, но да, вы хотели бы включить это в функционирование и запустить его несколько раз.

вот код, который вы, возможно, захотите посмотреть, чтобы просто генерировать квадраты, используя ваш код:

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

function rect(){
  var cr = 'rgb('+
    Math.floor(Math.random()*256)+','+
    Math.floor(Math.random()*256)+','+
    Math.floor(Math.random()*256)+')';

  ctx.fillStyle = cr;
  ctx.fillRect(Math.random()*50, Math.random()*50 , 50 ,50);

  requestAnimationFrame(rect);
}

rect();

и этот код сгенерирует прямоугольники безумными.

Ответ 3

Используйте функцию, представленную в здесь

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.rect(20, 10, 200, 100);
context.fillStyle = getRandomColor();
context.fill();

Демо JSFiddle