Programmatische Gradientenstopps mit Javascript

Question

Arbeiten mit Javascript (jQuery), 2 Farbwerte gegeben (2033ff und 3300a0 zum Beispiel) Wie kann ich bestimmte Gradientenstopps zwischen ihnen feststellen?

Grund dafür ist, beabsichtige ich, eine Reihe von Farbwerten zur Verwendung:

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

Es 86.400 Sekunden in einem Tag zu sein, 00.00 abbildet 0 und 23.59 abbildet 86399. Mit der Zeit Übergibt die Hintergrundfarbe eines angegebenen Elements in der entsprechenden Farbe in der Verlaufsliste über window.setInterval(function(e){ ... }, 1000). Zum Beispiel 2:32:11PM = 52331, die von dem Beispiel irgendwo zwischen 2033ff und 3300a0 liegen würde.

Ich brauche das Array nicht mit den Werten aufzufüllen (es sei denn das wäre einfacher), sondern benutze den Index und den Wert als Referenzen.

Answer 1

einfach eine lineare Interpolation:

Da 2033ff und 3300a0 als Anfang und am Ende, was Sie tun:

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; 

Answer 2

ich die Bibliothek RainbowVis-JS als allgemeine Lösung für die Zuordnung von Zahlen zu Farben geschrieben. Für Ihr Beispiel würden Sie verwenden:

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