html中颜色可以使用rgb和hex方式来表示。
在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色rgb数值的梯级渐变算法。
其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33（即），g的值为16进制的66，和b为16进制的00，转换后用rgb完整表述为：rgb(51,102,0)。
其中使用16进制进行加减乘除不方便，尤其还使用了rgb的16进制颜色组合（#336600）。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组合。
已知：rstart=50，rend=200，rstart、rend之间平均分成3份（step=3），求每份的数值（stepn）分别是多少。
公式：gradient = rstart+ (rend-rstart) / step * n （第n步的颜色rgb中r的值）
实现方法非常简单，只是需要将颜色从rgb到hex的互转。
实现代码：
我要评论
<script type="text/javascript">
/*
// 作者 yanue
// 参数：
// startcolor：开始颜色hex
// endcolor：结束颜色hex
// step:几个阶级（几步）
*/
function gradientcolor(startcolor,endcolor,step){
startrgb = this.colorrgb(startcolor);//转换为rgb数组模式
startr = startrgb[0];
startg = startrgb[1];
startb = startrgb[2];
endrgb = this.colorrgb(endcolor);
endr = endrgb[0];
endg = endrgb[1];
endb = endrgb[2];
sr = (endr-startr)/step;//总差值
sg = (endg-startg)/step;
sb = (endb-startb)/step;
var colorarr = [];
for(var i=0;i<step;i++){
//计算每一步的hex值
var hex = this.colorhex('rgb('+parseint((sr*i+startr))+','+parseint((sg*i+startg))+','+parseint((sb*i+startb))+')');
colorarr.push(hex);
}
return colorarr;
}
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
gradientcolor.prototype.colorrgb = function(scolor){
var reg = /^#([0-9a-fa-f]{3}|[0-9a-fa-f]{6})$/;
var scolor = scolor.tolowercase();
if(scolor && reg.test(scolor)){
if(scolor.length === 4){
var scolornew = "#";
for(var i=1; i<4; i+=1){
scolornew += scolor.slice(i,i+1).concat(scolor.slice(i,i+1));
}
scolor = scolornew;
}
//处理六位的颜色值
var scolorchange = [];
for(var i=1; i<7; i+=2){
scolorchange.push(parseint("0x"+scolor.slice(i,i+2)));
}
return scolorchange;
}else{
return scolor;
}
};
// 将rgb表示方式转换为hex表示方式
gradientcolor.prototype.colorhex = function(rgb){
var _this = rgb;
var reg = /^#([0-9a-fa-f]{3}|[0-9a-fa-f]{6})$/;
if(/^(rgb|rgb)/.test(_this)){
var acolor = _this.replace(/(?:(|)|rgb|rgb)*/g,"").split(",");
var strhex = "#";
for(var i=0; i<acolor.length; i++){
var hex = number(acolor[i]).tostring(16);
hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
if(hex === "0"){
hex += hex;
}
strhex += hex;
}
if(strhex.length !== 7){
strhex = _this;
}
return strhex;
}else if(reg.test(_this)){
var anum = _this.replace(/#/,"").split("");
if(anum.length === 6){
return _this;
}else if(anum.length === 3){
var numhex = "#";
for(var i=0; i<anum.length; i+=1){
numhex += (anum[i]+anum[i]);
}
return numhex;
}
}else{
return _this;
}
}
var gradient = new gradientcolor('#013548','#554851',10);
console.log(gradient);//控制台输出
alert(gradient);
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论