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

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

我该怎么做呢?


当前回答

有很多方法可以做到这一点。以下是我做的一些:

简短的一行代码,保证有效的颜色

'#'+(Math.random().toString(16)+'00000').slice(2,8)

生成6个随机十六进制数字(0-F)

function randColor() {
    for (var i=0, col=''; i<6; i++) {
        col += (Math.random()*16|0).toString(16);
    }
    return '#'+col;
}

// ES6 one-liner version
[..."000000"].map(()=>Math.random().toString(16)[2]).join("")

生成单独的HEX组件(00-FF)

function randColor2() {
    var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
    return '#' +r+g+b;
}

过度设计的十六进制字符串(XORs 3输出一起形成颜色)

function randColor3() {
    var str = Math.random().toString(16) + Math.random().toString(16),
    sg = str.replace(/0./g,'').match(/.{1,6}/g),
    col = parseInt(sg[0], 16) ^ 
          parseInt(sg[1], 16) ^ 
          parseInt(sg[2], 16);
    return '#' + ("000000" + col.toString(16)).slice(-6);
}

其他回答

可能是最简单的

'#' + Math.random().toString(16).substring(9)

我怀疑还有什么能比这条更快或更短:

"#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")

挑战!

您还可以使用在所有优秀浏览器(http://caniuse.com/#feat=css3-colors)上可用的HSL。

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

这将给你只有明亮的颜色,你可以玩亮度,饱和度和阿尔法。

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

为了适当的随机性。

随机的颜色

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

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

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

增强了一点的一行代码,使方法更加生动

'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)