如何找出漸變中的所有顏色？

Question

可能重複：
Javascript color gradient

我有一個顏色（比方說黃色）和兩個彩色（藍） - 它們構成了一個梯度。
基於0到100的值（0表示黃色，100表示​​藍色），我想表示色彩1和2的混合。

我想在移動瀏覽器（Safari專門）中做到這一點。

有沒有辦法在JavaScript中做到這一點？

Answer 1

如果你想要做的是創造一個顏色，是其它兩種顏色之間的一定百分比（0-100），你可以做到這一點與此javascript：

function makeGradientColor(color1, color2, percent) { 
    var newColor = {}; 

    function makeChannel(a, b) { 
     return(a + Math.round((b-a)*(percent/100))); 
    } 

    function makeColorPiece(num) { 
     num = Math.min(num, 255); // not more than 255 
     num = Math.max(num, 0);  // not less than 0 
     var str = num.toString(16); 
     if (str.length < 2) { 
      str = "0" + str; 
     } 
     return(str); 
    } 

    newColor.r = makeChannel(color1.r, color2.r); 
    newColor.g = makeChannel(color1.g, color2.g); 
    newColor.b = makeChannel(color1.b, color2.b); 
    newColor.cssColor = "#" + 
         makeColorPiece(newColor.r) + 
         makeColorPiece(newColor.g) + 
         makeColorPiece(newColor.b); 
    return(newColor); 
} 

此功能假設使用兩個端點顏色的每個r，g和b通道值之間的線性插值進行梯度，使得50％梯度值是每個r，g，b值（呈現的兩種顏色之間的中點）的中點。一次也可以製作不同類型的漸變（使用不同的插值函數）。

這個結果分配到的背景下，您使用的CSS顏色值我添加到返回的結果是這樣的：

// sample usage 
var yellow = {r:255, g:255, b:0}; 
var blue = {r:0, g:0, b:255}; 
var newColor = makeGradientColor(yellow, blue, 79); 
element.style.backgroundColor = newColor.cssColor;