javascript实现颜色渐变的方法


Posted in Javascript onOctober 30, 2013

渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。

已知:A=50,B=200,A、B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。

公式:Gradient = A + (B-A) / Step * N

注]编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了:Gradient = A + (B-A) * N / Step

Step=3时,根据公式可以求出Step1=A+(A-B)/3*1=50+(200-50)/3=100,Step2=A+(A-B)/3*2=50+(200-50)/3*2=150。这就是均匀渐变的算法原理了,很简单,小学知识。

两种颜色的渐变就是对两种颜色的RGB通道分别进行这样的计算,例如两种颜色分别是RGB(200,50,0)和RGB(50,200,0),用上述公式进行计算就是:

RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150

GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100

BStep1=BA=BA+(BA-BA)/Step*N=0

因此RGBStep1=(150,100,0),同样的方法可以求出RGBStep2=(100,150,0)。

网页中的渐变文字特效就是这么做出来的。例如你的网页HTML中有这么一句代码:<span id=myText>你就是我天空里最美丽的彩虹</span>,在后面加入如下的代码就可以实现渐变文字。(生成渐变的两种颜色:#c597ff和#73e7a9)

var ColorA = "#c597ff";
var ColorB = "#73e7a9";
// 颜色#FF00FF格式转为Array(255,0,255)
function color2rgb(color)
{
 var r = parseInt(color.substr(1, 2), 16);
 var g = parseInt(color.substr(3, 2), 16);
 var b = parseInt(color.substr(5, 2), 16);
 return new Array(r, g, b);
}
// 颜色Array(255,0,255)格式转为#FF00FF
function rgb2color(rgb)
{
 var s = "#";
 for (var i = 0; i < 3; i++)
 {
  var c = Math.round(rgb[i]).toString(16);
  if (c.length == 1)
   c = '0' + c;
  s += c;
 }
 return s.toUpperCase();
}
// 生成渐变
function gradient()
{
 var str = myText.innerText;
 var result = "";
 var Step = str.length - 1;
 var Gradient = new Array(3);
 var A = color2rgb(ColorA);
 var B = color2rgb(ColorB);
 for (var N = 0; N <= Step; N++)
 {
  for (var c = 0; c < 3; c++) // RGB通道分别进行计算
  {
   Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
  }
  result += "<font color=" + rgb2color(Gradient) +
   ">" + str.charAt(N) + "</font>";
 }
 myText.innerHTML = result;
}
gradient(); // 运行程序

A、B、C三种颜色或多种颜色的渐变,理论上讲只要先把A、B进行渐变,再把B、C进行渐变,依此类推就行了。实践过程中,为了使渐变的每个像素颜色分布均匀,产生了多种插值算法,具体算法以后再讨论吧。

Javascript 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JS倒计时代码汇总
Nov 25 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 #Javascript
js history对象简单实现返回和前进
Oct 30 #Javascript
js 3种归并操作的实例代码
Oct 30 #Javascript
javascript获取选中的文本的方法代码
Oct 30 #Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 #Javascript
js实现收缩菜单效果实例代码
Oct 30 #Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 #Javascript
You might like
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
详解js的作用域、预解析机制
2018/02/05 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Angular 容器部署的方法
2018/04/17 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python中dict和set的用法讲解
2019/03/28 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
在python image 中实现安装中文字体
2020/05/16 Python
投标单位介绍信
2014/01/09 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
母亲节感恩寄语
2014/02/21 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript