rgb自动填充颜色C语言,自动生成颜色

该博客介绍了如何使用JavaScript创建一个颜色处理类,包括从HSL到RGB的转换,并用于填充HTML表格背景色。通过`Colors`类,可以生成指定数量的随机HSL颜色,并确保相邻颜色之间的差异,以及排除过于灰暗或过亮的颜色。最后,该类将颜色转换为16进制格式,便于网页应用。
摘要由CSDN通过智能技术生成

var Colors = function(hslLength) {

this.hslLength = hslLength ? hslLength : 1;

this.cArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

this.hslArray = [];

};

//返回颜色数组

Colors.prototype.rgbArray = function() {

var self = this;

this.hslArray = this.getHslArray();

if (!self.hslArray.length) return [];

var rgbArray = self.hslArray.map(function(item) {

return self.hslToRgb.apply(this, item);

});

return rgbArray.map(function(item) {

return {

//三原色值

value: item,

//16进制的颜色

hex: self.rgbToHexadecimal(item),

//rgb颜色

rgb: 'rgb(' + item.toString() + ')',

style: {

background: 'rgb(' + item.toString() + ')'

}

}

});

};

/**

* RGB颜色转为16进制

* @param {Object} item rgb颜色数组

*/

Colors.prototype.rgbToHexadecimal = function(item) {

if (item && item.length == 3) {

var a = item[0],

b = item[1],

c = item[2],

d = "#",

cArray = this.cArray;

d += cArray[Math.floor(a / 16)] + "" + cArray[a % 16] + "";

d += cArray[Math.floor(b / 16)] + "" + cArray[b % 16] + "";

d += cArray[Math.floor(c / 16)] + "" + cArray[c % 16] + "";

return d;

}

};

/**

* HSL颜色值转换为RGB

* H,S,L 设定在 [0, 1] 之间

* R,G,B 返回在 [0, 255] 之间

*

* @param H 色相

* @param S 饱和度

* @param L 亮度

* @returns Array RGB色值

*/

Colors.prototype.hslToRgb = function(H, S, L) {

var R, G, B;

if (+S === 0) {

R = G = B = L; // 饱和度为0 为灰色

} else {

var hue2Rgb = function(p, q, t) {

if (t < 0) t += 1;

if (t > 1) t -= 1;

if (t < 1 / 6) return p + (q - p) * 6 * t;

if (t < 1 / 2) return q;

if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;

return p;

};

var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;

var P = 2 * L - Q;

R = hue2Rgb(P, Q, H + 1 / 3);

G = hue2Rgb(P, Q, H);

B = hue2Rgb(P, Q, H - 1 / 3);

}

return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];

};

// 获取随机HSL

Colors.prototype.randomHsl = function() {

var H = Math.random();

var S = Math.random();

var L = Math.random();

return [H, S, L];

},

// 获取HSL数组

Colors.prototype.getHslArray = function() {

var HSL = [];

var hslLength = this.hslLength ? this.hslLength : 1;

for (var i = 0; i < hslLength; i++) {

var ret = this.randomHsl();

// 颜色相邻颜色差异须大于 0.25

if (i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {

i--;

continue; // 重新获取随机色

}

ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色

ret[2] = 0.4 + (ret[2] * 0.4); // [0.4 - 0.8] 排除过亮过暗色

// 数据转化到小数点后两位

ret = ret.map(function(item) {

return parseFloat(item.toFixed(2));

});

HSL.push(ret);

}

return HSL;

};

function btn() {

//获取td

var tds = document.getElementById("table").getElementsByTagName("td");

//颜色个数

var size = tds.length;

//生成一个16个颜色的数组

var colors = new Colors(size).rgbArray();

for (let i = 0; i < size; i++) {

//填充颜色

tds[i].style.backgroundColor = colors[i].hex;

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值