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 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
vue跨域解决方法
Oct 15 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
微信小程序实现form表单本地储存数据
Jun 27 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python超时重新请求解决方案
2019/10/21 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python 基于opencv操作摄像头
2020/12/24 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
年会活动策划方案
2014/01/23 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技