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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
详解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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP Undefined index报错的修复方法
2011/07/17 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
js闭包用法实例详解
2016/12/13 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
协议书范本
2014/04/23 职场文书
经理任命书模板
2014/06/06 职场文书
节约用电标语
2014/06/17 职场文书
大学军训决心书
2015/02/05 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android