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


Posted in Javascript onMarch 21, 2017

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>

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

Javascript 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 #Javascript
十大热门的JavaScript框架和库
Mar 21 #Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 #Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 #Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 #Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
You might like
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Js面试算法详解
2018/04/08 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
使用python实现接口的方法
2017/07/07 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python 深度学习中的4种激活函数
2020/09/18 Python
少先队学雷锋活动总结范文
2014/03/09 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
大学生见习报告范文
2014/11/03 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
教师个人事迹材料
2014/12/17 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python