在 JavaScript 中将一系列值（例如 [0,255]）映射到一系列颜色（例如彩虹：[red,blue]）答案

【问题标题】：Map a range of values (e.g. [0,255]) to a range of colours (e.g. rainbow: [red,blue]) in JavaScript在 JavaScript 中将一系列值（例如 [0,255]）映射到一系列颜色（例如彩虹：[red,blue]）
【发布时间】：2011-07-05 12:02:26
【问题描述】：

我相信这一定是一个相当简单的问题，但这是一个很难用语言表达的问题。我什至不知道用 Google 搜索什么。

我不是在寻找任何复杂的解决方案。基本上，我在画布上画线，我想要不同的颜色，具体取决于线的长度。通常我只是缩放红色通道（#ff0000 *（行长）/（最大行长）），但这种解决方案并不理想。我只是在寻找一个方程式，如果这有意义的话，它将为我提供彩虹渐变上某个位置的#rrggbb 值。

感谢任何可以提供帮助的人！非常感谢。

【问题讨论】：

我喜欢@rsp 的回答 (+1'ed) 但想提一下 Prefuse/Flare 可视化库使用术语编码器来描述将数据转换为视觉属性的功能（如颜色：ColorEncoder）：flare.prefuse.org/api/flare/vis/operator/encoder/… 不确定整个领域的标准化程度...
我将示例更改为使用 HSL 颜色模型，这使它更简单、更好看。

标签： javascript colors mapping

【解决方案1】：

由于您使用的是画布，因此您可能可以使用 HSL 颜色空间（如果我错了，请纠正我）。这将使代码更简单：

function rainbow(n) {
    n = n * 240 / 255;
    return 'hsl(' + n + ',100%,50%)';
}

如果您可以将范围从 0 到 240，那么您甚至可以删除此函数的第一行。见DEMO。

【讨论】：

我不确定 240 的范围是多少。当我在 Chrome 中测试它时，它期望 hsl 函数的第一个参数是以度为单位的角度，范围从 0 到 360。
@JimPivarski - Matthew 询问从红色到蓝色的彩虹，蓝色在 HSL 中是 240 度。 360 度将再次变回红色，这不是问题中所要求的。

【解决方案2】：

article 描述了一种在 JS 中制作彩虹色的方法。基本上它使用正弦函数来制作彩虹色。简而言之，您需要的方程式是这样的。见DEMO。

function RainBowColor(length, maxLength)
{
    var i = (length * 255 / maxLength);
    var r = Math.round(Math.sin(0.024 * i + 0) * 127 + 128);
    var g = Math.round(Math.sin(0.024 * i + 2) * 127 + 128);
    var b = Math.round(Math.sin(0.024 * i + 4) * 127 + 128);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

【讨论】：

【解决方案3】：

我最终使用了类似于 @rsp 的答案

                var getColorAtScalar = function (n, maxLength) {
                    var n = n * 240 / (maxLength);
                    return 'hsl(' + n + ',100%,50%)';
               }

【讨论】：