Trochę źle zrozumiałeś, javaScript nie modeluje kolorów jako szesnastkowych, podobnie jak system. Notacja szesnastkowa jest przeznaczona tylko dla dokumentu czytelnego dla człowieka. Wewnętrznie twój system przechowuje trzy wartości całkowite. Możesz je odprawiać i manipulować nimi bezpośrednio.
Powiedzmy jednak, że chcesz manipulować rzeczywistym dokumentem zamiast wewnętrznych elementów systemu. Następnie najlepiej odłożyć obliczenia na bibliotekę, która robi to za Ciebie. Widzisz, że przeglądarka może reprezentować kolory na wiele sposobów, więc musisz zaprogramować wszelkiego rodzaju przypadki, takie jak dane wejściowe ad rgb i hsv. Sugeruję więc użycie czegoś takiego jak Color.js , dzięki czemu oszczędzasz dużo bólu głowy, ponieważ nie musisz samodzielnie mieszać, przyciemniać, rozjaśniać itp.
Edycja:
Jeśli chcesz to zrobić sam, czego nie polecam. Zacznij od przekształcenia prezentacji szesnastkowej w tryplety liczbowe liczb całkowitych lub liczb zmiennoprzecinkowych z zakresu 0-1, co ułatwia obliczenia.
Teraz w celu łatwej manipulacji konwersją kolorów wartości RGB na HSL lub HSB sprawia, że obliczenia jasności są trywialne (Wikipedia ma formuły). Więc po prostu dodaj lub odejmij jasność lub jasność. Do symulacji prawdziwego światła obliczenia są dość proste - wystarczy pomnożyć kolor światła przez kolor podstawowy. Zatem dla światła neutralnego jest to po prostu:
Wynik = Intensywność * Kolor
Jak wyjaśnił Rafael, formuła powtórzona przez kanał kolorów. W ten sposób możesz symulować kolorowe światło
Wynik = Intensywność * LigtColor * Kolor
Aby to najlepiej przekonwertować na najpierw zmiennoprzecinkowe, może także liniowe. Pozwala to na ciepłe lub chłodne światło w Twojej okolicy, które może zapewnić bardziej naturalny efekt.
Mieszanie alfa (nakładanie warstw na inne) jest po prostu
Wynik = ColorTop * alpha + ColorBottom * (1-alfa)
Ostateczna edycja
Wreszcie, oto kod, który robi coś w stosunku do tego, o co pytasz. Powodem, dla którego trudno to dostrzec, jest to, że jest to teraz rodzaj abstrakcyjnej formy. Aktywny kod dostępny tutaj
Zdjęcie 1 : Wynik kodu poniżej patrz także wersja na żywo .
{
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var Color = function(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.asHex = function() {
return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
}
Color.prototype.asRGB = function() {
return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
}
Color.prototype.blendWith = function(col, a) {
r = Math.round(col.r * (1 - a) + this.r * a);
g = Math.round(col.g * (1 - a) + this.g * a);
b = Math.round(col.b * (1 - a) + this.b * a);
return new Color(r, g, b);
}
Color.prototype.Mul = function(col, a) {
r = Math.round(col.r/255 * this.r * a);
g = Math.round(col.g/255 * this.g * a);
b = Math.round(col.b/255 * this.b * a);
return new Color(r, g, b);
}
Color.prototype.fromHex = function(hex) {
// http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
hex = hex.substring(1,7)
var bigint = parseInt(hex, 16);
this.r = (bigint >> 16) & 255;
this.g = (bigint >> 8) & 255;
this.b = bigint & 255;
}
ctx.font = "16px Arial";
ctx.fillText("Manual Alpha Blend", 18, 20);
var a = new Color(220, 0, 150);
var b = new Color();
b.fromHex('#00C864');
//Alpha blend
ctx.fillStyle = a.asHex();
ctx.fillRect(25, 25, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 30, 45);
ctx.fillStyle = b.asRGB()
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 55, 145);
var bl = a.blendWith(b, 0.3);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(50, 50, 75, 75);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(bl.asHex(), 55, 70);
// lighten 1
ctx.fillStyle = '#000000';
ctx.fillText('Neutral Light', 200, 20);
var c = new Color(100, 100, 100);
var purelight= new Color(255, 255, 255);
ctx.fillStyle = c.asRGB();
ctx.fillRect(200, 25, 100, 100);
var bl = c.Mul(purelight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(225, 50, 100, 100);
var bl = c.Mul(purelight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(250, 75, 100, 100);
// lighten 2
ctx.fillStyle = '#000000';
ctx.fillText('Yellowish Light', 400, 20);
var c = new Color(100, 100, 100);
var yellowlight= new Color(255, 255, 220);
var bl = c.Mul(yellowlight,1.0);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(400, 25, 100, 100);
var bl = c.Mul(yellowlight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(425, 50, 100, 100);
var bl = c.Mul(yellowlight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(450, 75, 100, 100);
}
}
PS, powinieneś zapytać o przepływie stosów, ponieważ większość z nich można już znaleźć w przepływie stosów.
