Question

我确信这一定是相当简单的，但这是一个难以言喻的问题。我甚至不知道谷歌的用途。

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

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

Answer 1

由于您正在使用画布，因此您可以使用HSL色彩空间（如果我错了，请纠正我）。它会使代码更简单：

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

如果您的范围从0到240可以，那么您甚至可以删除此功能的第一行。请参阅DEMO。

Answer 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 + ')';
}

Answer 3

我最终使用的东西类似于@rsp的回答

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

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

3 个答案: