【问题标题】:How do you get random RGB in Javascript? [duplicate]你如何在Javascript中获得随机RGB? [复制]
【发布时间】:2014-05-30 12:15:57
【问题描述】:

我有这个使用 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:这个问题的双打使用 HEX 值,而不是 RGB 值。

【问题讨论】:

  • 生成三个随机数(范围为 0 到 255),将它们插入一个字符串(格式为"rgb(n1, n2, n3)")并将其分配给一个变量。你被困在哪里了?

标签: javascript random rgb


【解决方案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

【讨论】:

  • 这是第一个为我工作的,但描边和填充的颜色不同。
  • @ipodlover3354 - 我认为这是重点,但我已经更新了答案,让两者使用相同的颜色。
【解决方案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

【讨论】:

    【解决方案3】:

    这是一个非常简单的方法,可以生成单个随机数。基本上,它会生成一个介于00xfffff 之间的数字(或2^24,您可以从24 位中获得的最高数字)。您可以从 8 位获得的最高值是 255。该算法将随机数的最左 8 位用于 RED,将中间 8 位用于 GREEN,将最后 8 位用于 BLUE,使用所有 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) 
    

    改编自source

    【讨论】:

    • 你需要var randomRgb = getRandomRgb();的地方。然后在需要的地方使用randomRgb。我将如何确定范围留给您,因为我不知道如何将其实际合并到您当前的代码中。
    • +1 只生成一个随机数。
    • 同意;它很漂亮:但是 我不知道它是如何工作的......!
    猜你喜欢
    • 1970-01-01
    • 2012-12-16
    • 1970-01-01
    • 2015-05-20
    • 2021-07-18
    • 2015-06-12
    • 2020-04-19
    • 2021-03-03
    • 2012-10-25
    相关资源
    最近更新 更多