javascript - 我需要一个函数，它为属于某个范围的给定 float 输出十六进制值

Question

我很抱歉标题不好(如果你愿意，可以编辑)，但我不知道如何提出这个要求。我附上了一张来自 Photoshop 的图片，可以更好地说明事情。

请求本身非常简单:您有一个从 10.0 到 0.0 的数字范围。10 代表颜色 #00ff00(深绿色)，0.0 代表颜色 #ff0000(深红色)。

现在，当您输入数字 10.0 时，它会输出 #00ff00。当你给它类似 8.2 的东西时，它会输出类似 #00cc33 的东西，这样你就可以一直向下 float 渐变，但总是从 #00ff00 float 到橙色 #ff9900 到 #ff0000(中间的橙色也可以省略)。

Answer 1

一种方法是将颜色想象成圆的一部分，然后使用 Math.cos 或 Math.sin。

function toColour(x) {
    var pad = function (x) {
        x = x.toString(16);
        if (x.length === 1) {
            return '0' + x;
        }
        return x;
    }, r, g, b;
    r = ~~(255 * Math.cos(Math.PI * x / 20)); // cos(0) = 1, cos(π/2) = 0
    g = ~~(255 * Math.sin(Math.PI * x / 20)); // sin(0) = 0, sin(π/2) = 1
    b = 0;
    return '#' + pad(r) + pad(g) + pad(b);
}

// test the gradient produced
for (var i = 0; i <= 10; ++i) {
    document.body.appendChild(
        document.createElement('div')
    ).setAttribute('style', 'width: 400px;height: 5px;background: '+toColour(i)+';');
}

参见 this fiddle测试结果(感谢 MikeM )