给定这个函数,我想用随机颜色生成器替换颜色。
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
});
我该怎么做呢?
当前回答
你应该使用'#'+Math.floor(Math.random()*16777215).toString(16);对于一个随机的颜色代码。
你的想法,但为什么是16777215?检查本文:用一行JavaScript代码生成一种随机颜色
generateRandomColor()函数 { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); 如果(randomColor。length != 7){//在任何情况下,颜色代码都是无效的 randomColor = generateRandomColor(); } 返回randomColor; //随机的颜色将是新鲜的 } document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94
其他回答
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 get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
http://jsfiddle.net/XmqDz/1/
我已经生成了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个随机颜色,并且每个页面加载的颜色都是相同的。
使用相同的“随机”颜色,而不是使用数学。随机你可以使用,例如,Mulberry32算法。
下面是使用mulberry32打印随机颜色的行,它使用输入元素的种子值。
为了获得一个随机的颜色值,我使用HLS“生成器”。除了随机的“H”(色调)值(总共360种颜色)外,还使用随机的“L”(亮度)值(从“40%”到“60%”)。另外,每个下一个“H”值至少相差10,以防止相邻颜色过于相似。
function hlsGen(seed) { if (isNaN(seed)) { seed = 0; } const random = mulberry32(seed); let preH = 0; function getH() { while (true) { const newH = random() * 360; if (Math.abs(preH - newH) > 10) { preH = newH; return newH; } } } return function() { const H = getH(); const L = (40 + random() * 20) + "%"; return `hsl(${H}, 100%, ${L})`; }; } function mulberry32(seed = Date.now()) { return function() { let x = seed += 0x6D2B79F5; x = Math.imul(x ^ x >>> 15, x | 1); x ^= x + Math.imul(x ^ x >>> 7, x | 61); return ((x ^ x >>> 14) >>> 0) / 4294967296; } } // --- The example code --- const input = document.createElement("input"); document.body.append(input); input.addEventListener("input", () => { const seed = Number(input.value); const nextHls = hlsGen(seed); document.querySelectorAll("div").forEach(div => div.remove()); for (let i = 0; i < 20; i++) { const style = `border-left: 10px solid ${nextHls()};`; document.body.insertAdjacentHTML("beforeend", `<div style="${style}">${i}</div>`); } }); input.value = 100; input.dispatchEvent(new Event("input"));
map
总是返回一个有效的RGB颜色:
`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`
让c =“rgb ($ {[1, 2, 3] . map (x = > math . random() * 256 | 0)})” console.log (c); document.body.style.background = c