给定这个函数,我想用随机颜色生成器替换颜色。
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
我该怎么做呢?
给定这个函数,我想用随机颜色生成器替换颜色。
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
我该怎么做呢?
当前回答
几乎所有以前的速记方法都会生成无效的十六进制代码(五位数)。我在这里遇到了一个类似的技巧,只是没有这个问题:
"#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6)
Test
在控制台试试这个:
for(i = 0; i < 200; i++) {
console.log("#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6));
}
其他回答
不需要十六进制字母的散列。JavaScript可以自己做到这一点:
function get_random_color() {
function c() {
var hex = Math.floor(Math.random()*256).toString(16);
return ("0"+String(hex)).substr(-2); // pad with zero
}
return "#"+c()+c()+c();
}
几乎所有以前的速记方法都会生成无效的十六进制代码(五位数)。我在这里遇到了一个类似的技巧,只是没有这个问题:
"#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6)
Test
在控制台试试这个:
for(i = 0; i < 200; i++) {
console.log("#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6));
}
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
http://jsfiddle.net/XmqDz/1/
所以,虽然这里所有的答案都很好,但我想对输出有更多的控制。例如,我想防止任何接近白色的阴影,同时确保我得到明亮的充满活力的颜色,而不是水洗阴影。
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值。你可以不带参数调用它,得到我的默认设置,它通常会生成一个非常鲜艳的颜色,有明显的主色调,或者你可以提供你自己的范围数组。
投票最多的回答表明,Martin Ankerl的方法比随机十六进制数字更好,尽管我还没有改进Ankerl的方法,但我已经成功地将其翻译成JavaScript。
我想我应该对这个已经非常大的Stack Overflow问题发布一个额外的答案,因为顶部的答案有另一个评论链接到一个带有Ankerl逻辑的JavaScript实现的Gist,而这个链接是坏的(404)。如果我有这样的声誉,我就会简单地注释我创建的jsbin链接。
// Adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
return (rgb && rgb.length === 3) ? "#" +
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}
// The next two methods are converted from Ruby to JavaScript.
// It is sourced from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
const h_i = Math.floor(h*6)
const f = h*6 - h_i
const p = v * (1 - s)
const q = v * (1 - (f * s))
const t = v * (1 - (1 - f) * s)
let r, g, b
switch(h_i) {
case(0):
[r, g, b] = [v, t, p]
break
case(1):
[r, g, b] = [q, v, p]
break
case(2):
[r, g, b] = [p, v, t]
break
case(3):
[r, g, b] = [p, q, v]
break
case(4):
[r, g, b] = [t, p, v]
break
case(5):
[r, g, b] = [v, p, q]
break
}
return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}
// # Use the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a random start value
const gen_hex = (numberOfColors) => {
const colorArray = []
while (numberOfColors > 0) {
h += golden_ratio_conjugate
h %= 1
colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
numberOfColors -= 1
}
console.log(colorArray)
return colorArray
}
gen_hex(100)
https://jsbin.com/qeyevoj/edit?js,console