颜色渐变算法

《颜色渐变算法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、均匀渐变一下是从cl1到cl2渐变：intR,G,B;Colorcl1=Color.Red;Colorcl2=Color.Blue;for(inti=0;i

2、l1.Height/8),panel1.Width,panel1.Height/8);}渐变(Gradient)是美学中一条重要的形式美法则，与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。已知：A=50，B=200，A、B之间平均分成3份（Step=3），求每份的数值（StepN）分别是多少。公式：Gradient=A+(B-A)/Step*N[注]编程时为了提高效率避免浮点运算，往往把除

3、法放在最后面，这样公式就成了：Gradient=A+(B-A)*N/StepStep=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)

4、/3*1=200-50=150GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100BStep1=BA=BA+(BA-BA)/Step*N=0因此RGBStep1=(150,100,0)，同样的方法可以求出RGBStep2=(100,150,0)。网页中的渐变文字特效就是这么做出来的。例如你的网页HTML中有这么一句代码：你就是我天空里最美丽的彩虹，在后面加入如下的代码就可以实现渐变文字。（生成渐变的两种颜色：#c597ff和#73e7a9

5、）varColorA="#c597ff";varColorB="#73e7a9";//颜色#FF00FF格式转为Array(255,0,255)functioncolor2rgb(color){varr=parseInt(color.substr(1,2),16);varg=parseInt(color.substr(3,2),16);varb=parseInt(color.substr(5,2),16);returnnewArray(r,g,b);}//颜色Array(255

6、,0,255)格式转为#FF00FFfunctionrgb2color(rgb){vars="#";for(vari=0;i<3;i++){varc=Math.round(rgb[i]).toString(16);if(c.length==1)c='0'+c;s+=c;}returns.toUpperCase();}//生成渐变functiongradient(){varstr=myText.innerText;varresult="";varStep=str.length-1;varGradient=newArray(3);varA

7、=color2rgb(ColorA);varB=color2rgb(ColorB);for(varN=0;N<=Step;N++){for(varc=0;c<3;c++)//RGB通道分别进行计算{Gradient[c]=A[c]+(B[c]-A[c])/Step*N;}result+=""+str.charAt(N)+"";}myText.innerHTML=result;}gradient();//运行程序