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

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

我该怎么做呢?


当前回答

审查

这里的许多答案都是基于Math.random(). tostring(16)。他们有时会用一个随机数乘以一些数字,并假设转换到十六进制字符串总是会产生一个浮点十六进制表示,在点后面至少有6个数字(并且他们使用这些数字作为颜色)。

这是一个错误的假设

因为有很多数字实际上给出的数字小于6位(在点后面)。如果Math.random()选择这样一个数字,那么结果的十六进制颜色将无效(除非有人处理这种情况)。下面是一个生成器的例子(我是基于这个转换器编写的)。

function calc() { let n = hex2dec(hexInput.value) console.log(`${n} -> ${n.toString(16)}` ); } // Source: https://stackoverflow.com/questions/5055723/converting-hexadecimal-to-float-in-javascript/5055821#5055821 function hex2dec(hex) { hex = hex.split(/\./); var len = hex[1].length; hex[1] = parseInt(hex[1], 16); hex[1] *= Math.pow(16, -len); return parseInt(hex[0], 16) + hex[1]; } Put some 5-digit (or less) hexdecimal number in range 0-1<br> <input id="hexInput" value="0.2D4EE"> <button onclick="calc()">Calc</button>

我已经在没有这个假设的情况下对你的问题给出了两个答案:RGB和十六进制,所以在这个答案中,我不会提出另一个解决方案。

其他回答

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

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

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

这段代码(Mohsen的)不能生成像#fcfc80这样的颜色。

'#' + Math.random().toString(16).substr(-6);

Nicolas Buduroi的方法有效,除非Math.random()返回0,合理。

'#' + (Math.random().toString(16) + "000000").substring(2,8)

这段代码生成了很多非法的颜色(比如#abcde)。

'#' + Math.floor(Math.random()*16777215).toString(16);

我一直在用(+1或其他也可以,但我习惯了毫无理由的+2)

"#" + ((Math.random()+2)*16777216|0).toString(16).slice(1)

此方法将获得一个随机数,将其转换为十六进制字符串,然后提取它的一部分,从而得到一个随机十六进制。

function randomColor() {
    return "#" + Math.random().toString(16).slice(2,8);
}

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

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

挑战!

如果你像我一样是个新手,对十六进制之类的东西一无所知,这可能更直观。

function r() {
  return Math.floor(Math.random() * 256);
}

const color = "rgb(" + r() + "," + r() + "," + r() + ")";

你只需要以一个字符串结束,比如“rgb(255, 123, 220)”。