gradient

js实现颜⾊阶梯渐变效果（Gradient算法）

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的互转。

实现代码：

/*

//作者yanue

//参数：

//startColor：开始颜⾊hex

//endColor：结束颜⾊hex

//step:⼏个阶级（⼏步）

*/

functiongradientColor(startColor,endColor,step){

startRGB=gb(startColor);//转换为rgb数组模式

startR=startRGB[0];

startG=startRGB[1];

startB=startRGB[2];

endRGB=gb(endColor);

endR=endRGB[0];

endG=endRGB[1];

endB=endRGB[2];

sR=(endR-startR)/step;//总差值

sG=(endG-startG)/step;

sB=(endB-startB)/step;

varcolorArr=[];

for(vari=0;i

//计算每⼀步的hex值

varhex=ex('rgb('+parInt((sR*i+startR))+','+parInt((sG*i+startG))+','+parInt((sB*i+startB))+')');

(hex);

}

returncolorArr;

}

//将hex表⽰⽅式转换为rgb表⽰⽅式(这⾥返回rgb数组模式)

gb=function(sColor){

varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

varsColor=rCa();

if(sColor&&(sColor)){

if(===4){

varsColorNew="#";

for(vari=1;i<4;i+=1){

sColorNew+=(i,i+1).concat((i,i+1));

}

sColor=sColorNew;

}

//处理六位的颜⾊值

varsColorChange=[];

for(vari=1;i<7;i+=2){

(parInt("0x"+(i,i+2)));

}

returnsColorChange;

}el{

returnsColor;

}

};

//将rgb表⽰⽅式转换为hex表⽰⽅式

ex=function(rgb){

var_this=rgb;

varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

if(/^(rgb|RGB)/.test(_this)){

varaColor=_e(/(?:(|)|rgb|RGB)*/g,"").split(",");

varstrHex="#";

for(vari=0;i<;i++){

varhex=Number(aColor[i]).toString(16);

hex=hex<10?0+''+hex:hex;//保证每个rgb的值为2位

if(hex==="0"){

hex+=hex;

}

strHex+=hex;

}

if(!==7){

strHex=_this;

}

returnstrHex;

}elif((_this)){

varaNum=_e(/#/,"").split("");

if(===6){

return_this;

}elif(===3){

varnumHex="#";

for(vari=0;i<;i+=1){

numHex+=(aNum[i]+aNum[i]);

}

returnnumHex;

}

}el{

return_this;

}

}

vargradient=newgradientColor('#013548','#554851',10);

(gradient);//控制台输出

alert(gradient);

以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！