JavaScript中如何获取随机RGB颜色？

Question

我有一段使用 RGB 颜色选择的代码，我想知道如何让 JavaScript 使用 RGB 方法生成随机颜色并在整个代码中记住。

编辑：我尝试过这样做：

var RGBColor1 = (Math.round, Math.random, 255)
var RGBColor2 = (Math.round, Math.random, 255)
var RGBColor3 = (Math.round, Math.random, 255)

但它不起作用。请帮忙！

编辑2：代码使用了这个：

g.fillStyle="rgba(R,G,B,0.2)";
g.strokeStyle="rgba(R,G,B,0.3)";
E();

这些字母代表RGB颜色。

编辑3：这个问题的重复使用十六进制值，而不是RGB值。

- ipodlover3354

---

生成三个随机数（范围在0到255之间），将它们插入到一个字符串中（格式为 "rgb(n1, n2, n3)"），并将其赋值给一个变量。你卡在哪里了？ - David Thomas

Answer 1

function random_rgba() {
    var o = Math.round, r = Math.random, s = 255;
    return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}

var color = random_rgba();

g.fillStyle   = color;
g.strokeStyle = color;

FIDDLE

- adeneo

---

这是第一个能为我工作的，但描边和填充的颜色是不同的颜色。 - ipodlover3354

@ipodlover3354 - 我原本也是这么想的，但我已经更新了答案，使用相同的颜色。 - adeneo

Answer 2

const randomBetween = (min, max) => min + Math.floor(Math.random() * (max - min + 1));
const r = randomBetween(0, 255);
const g = randomBetween(0, 255);
const b = randomBetween(0, 255);
const rgb = `rgb(${r},${g},${b})`; // Collect all to a css color string

- assembly_wizard

---

感谢您！这是所有中最容易阅读的。 - Rocky Kev

Answer 3

以下是一种非常简单的方法，它基于单个随机数生成器。基本上，它生成介于0和0xfffff之间（或2^24，即从24个位中可以得到的最高数字）的数字。从8位中可以得到的最高值为255。该算法将随机数的最左侧8位用于红色，中间8位用于绿色，最后8位用于蓝色，使用了随机数的所有24位。

function getRandomRgb() {
  var num = Math.round(0xffffff * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

for (var i = 0; i < 10; i++) {
  console.log(getRandomRgb());
}

控制台输出（示例）：

rgb(2, 71, 181)
rgb(193, 253, 111)
rgb(172, 127, 203)
rgb(203, 53, 175)
rgb(226, 45, 44)
rgb(102, 181, 19)
rgb(92, 165, 221)
rgb(250, 40, 162)
rgb(250, 252, 120)
rgb(67, 59, 246) 

参考自来源。

- Cᴏʀʏ

---

在某个地方，你需要使用 var randomRgb = getRandomRgb();。然后在需要的任何地方使用 randomRgb。我不知道如何将其实际融入到你当前的代码中，所以我把作用域的范围留给你自己决定。 - Cᴏʀʏ

仅进行一次随机数生成，得到+1。 - jfriend00

同意，它很漂亮：但是我不知道它是如何工作的..! - David Thomas