在JavaScript中将一系列值(例如[0,255])映射到一系列颜色(例如rainbow:[red,blue])

Question

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

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

感谢能为您提供帮助的人!非常感谢.

Answer 1

既然您正在使用画布,那么您可以使用HSL颜色空间(如果我错了,请更正我).它会使代码更简单:

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

如果您的范围从0到240可以,那么您甚至可以删除此功能的第一行.见DEMO.

Answer 2

该文章介绍,使彩虹的颜色在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 + ')';
}