给定这个函数,我想用随机颜色生成器替换颜色。

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

我该怎么做呢?


当前回答

我想创造非常独特和充满活力的颜色(用于绘图)。对于任何严重的问题,hsl是一个比rgb更好的方法。如有必要,您可以像其他人已经提到的那样将hsl转换为rgb。

简单的方法:

创建一个从0到360的随机色调 创建一个从0.5到1(或50到100)的随机饱和度 将亮度设置为50%以获得最佳能见度。

color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)

修改方法

它创造了一个非常明亮和生动的颜色光谱,但问题是,在通常的颜色光谱中,红色、绿色、蓝色比黄色、青色和紫色更占主导地位。我通过acos函数变换了色调。技术原因很无聊,所以我跳过了,但你可以在维基上挖掘。

color_generator = () => {
    let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
    let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
    let hue = 120*color_section + 120*transformed_hue
    return hsl(hue, 0.5 + Math.random()/2, 0.5)
}

在尝试了许多其他方法后,这是我得到的最好的色谱。

引用:

https://observablehq.com/@d3/color-schemes https://en.wikipedia.org/wiki/HSL_and_HSV

其他回答

随机颜色生成与亮度控制:

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}

你应该使用'#'+Math.floor(Math.random()*16777215).toString(16);对于一个随机的颜色代码。

你的想法,但为什么是16777215?检查本文:用一行JavaScript代码生成一种随机颜色

generateRandomColor()函数 { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); 如果(randomColor。length != 7){//在任何情况下,颜色代码都是无效的 randomColor = generateRandomColor(); } 返回randomColor; //随机的颜色将是新鲜的 } document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94

使用ES6的Array.from()方法,我创建了这个解决方案:

function randomColor() {
  return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}

我见过的其他实现需要确保如果十六进制值有前导零,则该数字仍然包含六位数字。

K._的回答使用了ES6的padStart:

function randomColor() {
  return `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
}

我见过的另一个好的单线解决方案是

function randomColor() {
  return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}

为了适当的随机性。

随机的颜色

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

随机的阿尔法,随机的颜色。

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

正则表达式

总是返回有效的十六进制6位颜色

"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))

令c= "#xxxxxx"。替换(/ x / g, y = > (math . random () * 16 | 0) .toString (16)); console.log (c); document.body.style.background = c