javascript實現顏色漸變的方法

更新時間：2013年10月30日 16:26:39 作者：

這篇文章介紹了javascript實現顏色漸變的方法，有需要的朋友可以參考一下

漸變(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進行漸變，依此類推就行了。實踐過程中，為了使?jié)u變的每個像素顏色分布均勻，產生了多種插值算法，具體算法以后再討論吧。

您可能感興趣的文章: