当前位置：Gxlcms > JavaScript > js实现获取颜色渐变代码

js实现获取颜色渐变代码

时间：2021-07-01 10:21:17 帮助过：102人阅读

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);

人气教程排行