注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

2011年9月9日  

2010-08-23 15:03:47|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

均匀渐变

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

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

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

2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

[注]编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了: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)。

2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

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

<SCRIPT language="JavaScript">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)格式转为#FF00FFfunction 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(); // 运行程序</SCRIPT>

运行的效果:

2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

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

这是多种颜色渐变的效果:

2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

  评论这张
 
阅读(140)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017