如何找出渐变中的所有颜色？

Question

可能的重复：
Javascript颜色渐变

我有颜色一（比如说黄色）和颜色二（蓝色） - 它们组成渐变。
基于 0 到 100 的值（0 表示黄色，100 表示蓝色），我想表示颜色一和颜色二的混合。

我正在尝试在移动浏览器（特别是 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;