js实现颜色阶梯渐变效果(Gradient算法)

 更新时间:2017年03月21日 11:32:56   作者:半叶寒羽  
在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。下面跟着小编一起来看下吧

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>

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

相关文章

  • js中net::ERR_FILE_NOT_FOUND报错的解决

    js中net::ERR_FILE_NOT_FOUND报错的解决

    本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • async/await让异步操作同步执行的方法详解

    async/await让异步操作同步执行的方法详解

    这篇文章主要给大家介绍了关于async/await让异步操作同步执行的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用async/await具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • JS中常见的6种继承方式总结

    JS中常见的6种继承方式总结

    继承是面向对象三大特征之一,可以使得子类具有父类的属性和方法,同时还可以在子类中重新定义以及追加属性和方法,本文为大家整理了JS中常见的6种继承方式,希望对大家有所帮助
    2023-08-08
  • Ajax请求时无法重定向的问题解决代码详解

    Ajax请求时无法重定向的问题解决代码详解

    这篇文章主要介绍了Ajax请求时无法重定向的问题解决代码详解,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向。下面我们来看看解决方法吧
    2019-06-06
  • 深入浅出JavaScript中base64编码原理

    深入浅出JavaScript中base64编码原理

    今天翻开旧项目发现挺多图片相关的插件都是用 base64 来显示图片的。谈到 base64,脑海遐想翩翩,思绪回荡之下 base64 瑕瑜互见。这篇文章主要是记录了工作中遇见的问题并加以总结,如有不妥请指正
    2023-02-02
  • Three.Js实现颜色自定义变换效果实例

    Three.Js实现颜色自定义变换效果实例

    这篇文章主要给大家介绍了关于Three.Js实现颜色自定义变换效果的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • 微信小程序自定义顶部组件customHeader的示例代码

    微信小程序自定义顶部组件customHeader的示例代码

    这篇文章主要介绍了微信小程序自定义顶部组件customHeader的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • javascript简单写的判断电话号码实例

    javascript简单写的判断电话号码实例

    这篇文章主要介绍了javascript简单写的判断电话号码实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • js实现鼠标悬浮给图片加边框的方法

    js实现鼠标悬浮给图片加边框的方法

    这篇文章主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript中对象property的删除方法介绍

    JavaScript中对象property的删除方法介绍

    这篇文章主要介绍了JavaScript中对象property的删除方法介绍,本文主要是对delete操作符的介绍,需要的朋友可以参考下
    2014-12-12

最新评论