给定这个函数,我想用随机颜色生成器替换颜色。
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
});
我该怎么做呢?
当前回答
使用ES6的Array.from()方法,我创建了这个解决方案:
function randomColor() {
return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}
我见过的其他实现需要确保如果十六进制值有前导零,则该数字仍然包含六位数字。
K._的回答使用了ES6的padStart:
function randomColor() {
return `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
}
我见过的另一个好的单线解决方案是
function randomColor() {
return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}
其他回答
我想创造非常独特和充满活力的颜色(用于绘图)。对于任何严重的问题,hsl是一个比rgb更好的方法。如有必要,您可以像其他人已经提到的那样将hsl转换为rgb。
简单的方法:
创建一个从0到360的随机色调 创建一个从0.5到1(或50到100)的随机饱和度 将亮度设置为50%以获得最佳能见度。
color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)
修改方法
它创造了一个非常明亮和生动的颜色光谱,但问题是,在通常的颜色光谱中,红色、绿色、蓝色比黄色、青色和紫色更占主导地位。我通过acos函数变换了色调。技术原因很无聊,所以我跳过了,但你可以在维基上挖掘。
color_generator = () => {
let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
let hue = 120*color_section + 120*transformed_hue
return hsl(hue, 0.5 + Math.random()/2, 0.5)
}
在尝试了许多其他方法后,这是我得到的最好的色谱。
引用:
https://observablehq.com/@d3/color-schemes https://en.wikipedia.org/wiki/HSL_and_HSV
另一个随机颜色生成器:
var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added
这是我的两个版本的随机十六进制代码生成器。
/* Slowest but shortest. */
"#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
/* Good performance with small size. */
"#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");
/* Remy Sharp provided one that's the fastest but a little bit too long */
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16))
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
几乎所有以前的速记方法都会生成无效的十六进制代码(五位数)。我在这里遇到了一个类似的技巧,只是没有这个问题:
"#"+(((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));
}