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

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

我该怎么做呢?


当前回答

这个只生成饱和色

let randomSaturatedColor = () => {
    let r = Math.random().toString(16).slice(2, 4)
    let value_012345 = Math.random().toString(6).slice(2, 3)
    let hex = {
        [0]: `${r}00FF`,
        [1]: `00${r}FF`,
        [2]: `00FF${r}`,
        [3]: `${r}FF00`,
        [4]: `FF${r}00`,
        [5]: `FF00${r}`,
    }[value_012345]
    return '#' + hex
}

其他回答

下面是@Anatoliy提供的解决方案。

我只需要生成浅色(作为背景),所以我使用了三个字母(#AAA)格式:

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

有多种方法来创建随机十六进制颜色代码在博客文章中随机十六进制颜色代码生成器在JavaScript。当随机值小于0×100000时,你需要用0填充,所以下面是正确的版本:

var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});

这将用一个随机的十六进制数字替换六个0中的每一个,因此它一定会得到一个完整的六位数有效颜色值。

function randomColor(format = 'hex') {
    const rnd = Math.random().toString(16).slice(-6);
    if (format === 'hex') {
        return '#' + rnd;
    }
    if (format === 'rgb') {
        const [r, g, b] = rnd.match(/.{2}/g).map(c=>parseInt(c, 16));
        return `rgb(${r}, ${g}, ${b})`;
    }
}

所以,虽然这里所有的答案都很好,但我想对输出有更多的控制。例如,我想防止任何接近白色的阴影,同时确保我得到明亮的充满活力的颜色,而不是水洗阴影。

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

所以现在我可以指定3个任意范围来选择rgb值。你可以不带参数调用它,得到我的默认设置,它通常会生成一个非常鲜艳的颜色,有明显的主色调,或者你可以提供你自己的范围数组。

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

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(",") + ")";
}