Hai frainteso un po 'le cose, javaScript non modella il colore come esadecimale, né il sistema. La notazione esadecimale è solo per il documento leggibile dall'uomo. Internamente il sistema memorizza tre valori interi. Puoi interrogarli e manipolarli direttamente.
Ma diciamo solo che vuoi manipolare il documento reale invece che gli interni del sistema. Quindi è meglio rimandare il tuo calcolo a qualche libreria che lo fa per te. Vedete che il browser può rappresentare i colori in molti modi, quindi è necessario programmare tutti i tipi di casi come input ad rgb e hsv. Quindi ti suggerisco di usare qualcosa come Color.js che ti fa risparmiare un sacco di mal di testa, poiché non è necessario implementare da solo il blending, l'oscuramento, il schiarimento ecc ....
Edity:
Nel caso tu voglia farlo da solo, cosa che non ti consiglio. Inizia trasformando la rappresentazione esadecimale in terzine numeriche di numeri interi o in virgola mobile nell'intervallo 0-1, questo semplifica il calcolo.
Ora, per una facile manipolazione dei valori RGB di conversione del colore in HSL o HSB, ciò rende banali i calcoli della luminosità (Wikipedia ha formulazioni). Quindi basta aggiungere o sottrarre leggerezza o luminosità. Per la simulazione della luce reale, il calcolo è abbastanza semplice: basta moltiplicare il colore della luce per il colore di base. Quindi per la luce neutra è semplicemente:
Risultato = Intensità * Colore
Come spiegato da Rafael, formula ripetuta per canale di colore. Puoi simulare la luce colorata facendo
Risultato = Intensità * LigtColor * Colore
Per questo meglio convertire prima in float, forse anche lineare. Ciò consente una luce calda o fredda sulla tua zona che può dare una sensazione più naturale.
La fusione alfa (strato di colore sopra l'altro) è semplicemente
Risultato = ColorTop * alpha + ColorBottom * (1-alpha)
Modifica finale
Finalmente ecco un codice che fa qualcosa per quello che chiedi. La ragione per cui questo è difficile da vedere è che il suo tipo di astratto in forma in questo momento. Codice live disponibile qui
Immagine 1 : risultato del codice qui sotto vedi anche la versione live .
{
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, dovresti chiedere su StackOverflow poiché la maggior parte di questo può essere già trovata su StackOverFow.
