这个方法可以为您生成一个有序的颜色序列数组(集合)。
话不多说,直接上代码:
/**
* len:返回的list长度,默认值18;span:颜色跨度,值越小,变化率越小,颜色划分越细腻,默认值80;rsType:返回值的类型:1-List<String>,2-List<List<Integer>>,默认1
* @param {Number} len
* @param {Number} span
* @param {Number} rsType
*/
function getColorL(len, span, rsType){
len = parseInt(len); span = parseInt(span);
if(isNaN(len) || len <= 0){len = 18;}
if(isNaN(span) || span <= 0){span = 80;}
let r = 255, min = 255 % span, g = min, b = min, rs = [];
for(let i=0; i<len; i++){
rs.push(rsType == 2 ? [r, g, b] : r + ',' + g + ',' + b);
if(r + span > 255 && g + span <= 255 && b <= min){ g += span;} // 第一步:r 最大, g 最小, b 最小; g增加
else if(r - span >= min && g + span > 255 && b <= min){r -= span;} // 第二步:r 最大, g 最大,b 最小; r减小
else if(r <= min && g + span > 255 && b + span <= 255){b += span;} // 第三步:r 最小,g 最大,b 最小;b增加
else if(r <= min && g - span >= min && b + span > 255){g -= span;} // 第四步:r 最小,g 最大,b 最大;g减小
else if(r + span <= 255 && g - span < min && b + span > 255){r += span;} // 第五步:r 最小,g 最小,b最大;r增加
else if(r + span > 255 && g - span < min && b - span >= min){b -= span;} // 第六步:r 最大,g 最小,b最大;b减小
}
return rs;
}
如果调用时什么都不传,则默认len=18,span=80,rsType=1:
let rs = getColorL();
for(let i of rs){
$("body").append('<div style="width: 300px; height: 30px; background-color: rgb(' + i + ');"></div>');
}
效果如下:
如果您希望划分力度非常细腻,则可以传len=300,span=5:
let rs = getColorL(300, 5);
for(let i of rs){
$("body").append('<div style="width: 300px; height: 2px; background-color: rgb(' + i + ');"></div>');
}
效果如下:
方法很简单,就先演示到这里,希望对您能有所帮助。如果有任何谬误或缺陷,欢迎您指正。