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 相关文章推荐
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
javascript运行机制之执行顺序理解
Aug 03 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
php curl的深入解析
2013/06/02 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
大学生就业策划书范文
2014/04/04 职场文书
讲解员培训方案
2014/05/04 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
实施意见格式范本
2015/06/05 职场文书
爱国主义影片观后感
2015/06/18 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
基于angular实现树形二级表格
2021/10/16 Javascript
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis