Сопоставьте диапазон значений (например, [0,255]) с рядом цветов (например, радуга: [красный, синий]) в JavaScript

Я уверен, что это должно быть довольно просто, но это сложный вопрос к слову. Я даже не знаю, что делать в Google.

Я не ищу сложного решения. В принципе, я рисую линии на холсте, и я хочу разные цвета в зависимости от длины линии. Обычно я просто масштабирую, скажем, красный канал (# ff0000 * (длина строки)/(максимальная длина строки)), но это решение не является идеальным. Я просто ищу уравнение, которое даст мне значение #rrggbb для определенной позиции на градиенте радуги, если это имеет смысл.

Спасибо, кто поможет в этом! Он очень ценится.

Ответ 1

Поскольку вы используете холст, вы, вероятно, можете использовать цветовое пространство HSL (исправьте меня, если я ошибаюсь). Это сделает код намного проще:

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

Если вы в порядке с диапазоном от 0 до 240, вы можете даже удалить первую строку этой функции. См. DEMO.

Ответ 2

В этой статье описывается метод создания радужных цветов в JS. В основном он использует функцию Sine для создания радужных цветов. Короче говоря, вам нужно что-то вроде этого. См. 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 answer

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