javascript實作顏色漸層的方法_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中有這麼一句程式碼：你就是我天空裡最美麗的彩虹，在後面加入如下的程式碼就可以實現漸層文字。 （產生漸層的兩種顏色：#c597ff和#73e7a9）

複製程式碼 程式碼如下:

var ColorA = "#c597ffff"; 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 s = "#";
 for (var i = 0;  {
  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  {
  for (var c = 0; c   {
   Gradient[c] = A[c] (B[c]-A[c]) / Step * N;
  }
  result = " " str.charAt(N) "";
 }
 myText.innerHTML = result;

}

gradient(); // 執行程式

A、B、C三種顏色或多種顏色的漸變，理論上講只要先把A、B進行漸變，再把B、C進行漸變，依此類推就行了。實踐過程中，為了讓漸層的每個像素顏色分佈均勻，產生了多種插值演算法，具體演算法以後再討論。