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

Question

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

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

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

Answer 1

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

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

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

Answer 2

В этой статье описан метод создания цветов радуги в JS.В основном он использует функцию синуса для создания цветов радуги.Короче говоря, уравнение, которое вам нужно, выглядит примерно так.См. ДЕМО .

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