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

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

我该怎么做呢?


当前回答

在这种情况下,我喜欢parseInt:

parseInt(Math.random()*0xFFFFFFFF).toString(16)

其他回答

为了适当的随机性。

随机的颜色

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

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

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 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)`

使用十六进制的随机颜色生成:(#000000 - #FFFFFF)

语法非常简单。我们将十六进制颜色指定为#RRGGBB。我们知道每个十六进制颜色(RR、GG和BB)由8个字节定义。记住,每个字节可以表示256个值。

Rr - 16 * 16(0,1,2,3…F) = 256。GG和BB也类似。

这意味着十六进制颜色系统可以取256(R) × 256(G) × 256(B) = 16,777,216个值。

我们使用Math.random()和Math.floor()来获得一个范围为0到16777215的数字。

Math.floor(Math.random()*16777215)

最后,数字需要转换为以16为基数(十六进制),我们可以通过使用toString(基数)得到这个。

Math.floor(Math.random()*16777215).toString(16);
//->12ef556
let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);

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

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

'#'+(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);
}

使用getRandomColor()代替“#0000FF”:

function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function setRandomColor() { $("#colorpad").css("background-color", getRandomColor()); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="colorpad" style="width:300px;height:300px;background-color:#000"> </div> <button onclick="setRandomColor()">Random Color</button>