微客导航 » 文章资讯 » js实现颜色阶梯渐变效果（Gradient算法）

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

2024-02-27 04:56:05 149

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=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;
varcolorArr=[];
for(vari=0;i

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐