2、l1.Height/8),panel1.Width,panel1.Height/8);}漸變(Gradient)是美學(xué)中一條重要的形式美法則，與其相對應(yīng)的是突變。形狀、大小、位置、方向、色彩等視覺因素都可以進(jìn)行漸變。在色彩中，色相、明度、純度也都可以產(chǎn)生漸變效果，并會表現(xiàn)出具有豐富層次的美感。本文主要講述兩種顏色RGB數(shù)值的漸變算法。已知：A=50，B=200，A、B之間平均分成3份（Step=3），求每份的數(shù)值（StepN）分別是多少。公式：Gradient=A+(B-A)/Step*N[注]編程時為了提高效率避免浮點運算，往往把除
3、法放在最后面，這樣公式就成了：Gradient=A+(B-A)*N/StepStep=3時，根據(jù)公式可以求出Step1=A+(A-B)/3*1=50+(200-50)/3=100，Step2=A+(A-B)/3*2=50+(200-50)/3*2=150。這就是均勻漸變的算法原理了，很簡單，小學(xué)知識。兩種顏色的漸變就是對兩種顏色的RGB通道分別進(jìn)行這樣的計算，例如兩種顏色分別是RGB(200,50,0)和RGB(50,200,0)，用上述公式進(jìn)行計算就是：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)。網(wǎng)頁中的漸變文字特效就是這么做出來的。例如你的網(wǎng)頁HTML中有這么一句代碼：你就是我天空里最美麗的彩虹，在后面加入如下的代碼就可以實現(xiàn)漸變文字。（生成漸變的兩種顏色：#c597ff和#73e7a9
5、）varColorA="#c597ff";varColorB="#73e7a9";//顏色#FF00FF格式轉(zhuǎn)為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)格式轉(zhuǎn)為#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通道分別進(jìn)行計算{Gradient[c]=A[c]+(B[c]-A[c])/Step*N;}result+=""+str.charAt(N)+"";}myText.innerHTML=result;}gradient();//運行程序
