使用Javascript对HTML5 Canvas中的RGB随机化，并为每个fillRect使用新值

Question

我当前用于随机化rgb的代码已放入变量cr（颜色随机）

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

我继续将变量放入fillstyle canvas元素中以放置颜色：

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。任何解决方案将不胜感激:)

Answer 1

较晚的答案，但只需使用HSL设置随机颜色样式即可：

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

这将创建具有相同饱和度和光强度（亮度）的随机颜色。