Сопоставьте диапазон значений (например, [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%)';
}