Javascript 程序化渐变停止答案

【问题标题】：Programmatic gradient stops with JavascriptJavascript 程序化渐变停止
【发布时间】：2011-06-02 13:55:43
【问题描述】：

使用 Javascript (jQuery)，给定 2 个颜色值（例如 2033ff 和 3300a0），我如何确定它们之间的某些渐变停止点？

原因是，我打算使用一组颜色值：

    0 => '000000'
 8400 => 'f0ff00'
44000 => '2033ff'
68400 => '3300a0'

一天有 86400 秒，上午 12:00 映射到 0，晚上 11:59 映射到 86399。随着时间的推移，指定元素的背景颜色会通过window.setInterval(function(e){ ... }, 1000) 更改为渐变列表中的相应颜色。例如2:32:11PM = 52331，在示例中它介于2033ff 和3300a0 之间。

我不需要用值填充数组（除非这样更容易），而是使用索引和值作为引用。

【问题讨论】：

标签： javascript jquery colors hex gradient

【解决方案1】：

只做一个线性插值：

假设 2033ff 和 3300a0 作为开始和结束，您将执行以下操作：

red1 = 0x2033ff >> 16;
green1 = (0x2033ff >> 8) & 0xFF;
blue1  = 0x2033ff & 0xFF;

red2 = 0x3300a0 >> 16;
green2 = (0x3300a0 >> 8) & 0xFF;
blue2  = 0x3300a0 & 0xFF;

time = 0.3 // This should be between 0 and 1

outred = time * red1 + (1-time) * red2;
outgreen = time * green1 + (1-time) * green2;
outblue = time * blue1 + (1-time) * blue2;

【讨论】：

优秀nico；像魅力一样工作:)

【解决方案2】：

我编写了库 RainbowVis-JS 作为将数字映射到颜色的通用解决方案。对于您的示例，您将使用：

var rainbow = new Rainbow(); 
rainbow.setSpectrum('2033ff', '3300a0');
rainbow.setNumberRange(1, 86400);
var colour = rainbow.colourAt(52331); // 2c14c5

【讨论】：

感谢图书馆。我刚刚教我们的一位设计师如何使用它，他很喜欢。 :D