给定这个函数,我想用随机颜色生成器替换颜色。
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
});
我该怎么做呢?
当前回答
Paul Irish写的文章《JavaScript中的随机十六进制颜色代码生成器》绝对令人惊叹。使用:
'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
感谢Haytam分享padStart来解决十六进制代码长度的问题。
其他回答
Use:
function random_color(format)
{
var rint = Math.round(0xffffff * Math.random());
switch(format)
{
case 'hex':
return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
break;
case 'rgb':
return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
break;
default:
return rint;
break;
}
}
升级版:
function random_color( format ){
var rint = Math.floor( 0x100000000 * Math.random());
switch( format ){
case 'hex':
return '#' + ('00000' + rint.toString(16)).slice(-6).toUpperCase();
case 'hexa':
return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
case 'rgb':
return 'rgb(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
case 'rgba':
return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
default:
return rint;
}
}
var color = "#";
for (k = 0; k < 3; k++) {
color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}
它是如何工作的:
Math.random()*256获取一个从0到256(包括0到255)的随机(浮点数)数字 示例结果:116.15200161933899
加上|0就把小数点后的数都去掉了。 例:116.15200161933899 -> 116
使用. tostring(16)将此数字转换为十六进制(以16为基数)。 例:116 -> 74 另一个例子:228 -> e4
加上“0”,它就变成了零。这在我们获取子字符串时很重要,因为我们的最终结果每种颜色必须有两个字符。 例:74 -> 074 另一个例子:8 -> 08
.substr(-2)只获取最后两个字符。 例:074 -> 74 另一个例子:08 -> 08(如果我们没有添加“0”,这将产生“8”而不是“08”)
for循环运行此循环三次,将每个结果添加到颜色字符串中,产生如下内容: # 7408 e4
我已经生成了100种不同对比度的不同颜色,你可以根据需要增加数值:
Feedle举例:http://jsfiddle.net/zFbfE/29/ -
// CHANGE THE INITIAL SEED HERE
Math.seed = 23;
/**
* Math.seededRandom()
*
*/
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;
Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280.0;
return min + rnd * (max - min);
}
var c, r = 0,
l = 100000,
t,
random = [],
seededRandom = [];
for(var i=0; i<100; i++)
{
random[i] = 0;
seededRandom[i] = 0;
}
// Do some loops withouth benchmarking
// to have a "fair" comparison
/*for (c = 0; c < l; ++c) {
r = 5+5;
}*/
// benchmark Math.random()
t = new Date().getTime();
s = '';
// benchmark Math.seededRandom()
t = new Date().getTime();
while(l--){
r = Math.seededRandom();
seededRandom[(r*100)|0] += 1;
}
var inc = 0;
for(c=0; c<seededRandom.length; c++) {
//var inc=15;
for(var i=0; i<seededRandom.length; i++)
{
if(i!==c) {
if(seededRandom[c] == seededRandom[i]) {
seededRandom[c] += inc;
inc = inc + 10;
// console.log(seededRandom[c]);
}
}
}
inc = inc > 255 ? 0 : inc;
}
var a=[], b=[], d=[], inc=0, dec=255;
for(c=0; c<seededRandom.length; c++) {
a[c] = (seededRandom[c] % 100) + inc;
b[c] = dec - Math.floor(seededRandom[c]/100);
if(b[c] < 0)
b[c] = b[c]* - 1;
if(a[c] > 255)
a[c] -= 255;
d[c] = Math.floor(b[c]/2);
inc += 5;
dec -= 5;
}
var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http) {
$scope.id = [];
for(var i=0; i<seededRandom.length; i++)
$scope.id.push(i);
// Generate random number
$scope.Icon = [];$scope.Icon2 = [], $scope.Icon3 = [];
var ran = 0, inc = 5, dec = 255;
for(var i=0;i<seededRandom.length;i++)
{
$scope.Icon.push(a[i]%100);
$scope.Icon2.push(b[i]%100);
$scope.Icon3.push(d[i]%100);
console.log(a[i] + "|" + b[i] + "|" + d[i]);
}
});
它对我有用,我想它对你也会有帮助。
这个例子中最好的一点是,它将生成100个随机颜色,并且每个页面加载的颜色都是相同的。
为了适当的随机性。
随机的颜色
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`
随机的阿尔法,随机的颜色。
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`
function getRandomColor()
{
var color = "#";
for (var i = 0; i < 3; i++)
{
var part = Math.round(Math.random() * 255).toString(16);
color += (part.length > 1) ? part : "0" + part;
}
return color;
}