2012-03-27 25 views
0

Ich versuche, mit HTML5 Canvas zu spielen, und ich möchte die Farbe des FillStyle direkt von meinem CSS, aber auch mit etwas Transparenz erhalten. Wenn ich jQuery zum Lesen von CSS-Stilen verwende, wird anstelle von hex ein rgb-Wert zurückgegeben.RGB in RGBA konvertieren

fillColor = $(".myClass").css("background-color"); // return rgb(x, x, x) 

Auf den ersten Blick es es ist convinient mir, dass ich nicht brauchen, um es wieder zu konvertieren, aber ich finde, dass ich nicht die Alpha auf den RGB-Wert hinzufügen können, so habe ich es in Hex konvertieren, dann wandle es in RGBA mit einem Alpha-Wert um.

function convertHexToRGB(hex) 
{ 
    var red = hex.substr(1, 2), green = hex.substr(3, 2), blue = hex.substr(5, 2), alpha = arguments[1]; 
    color = "rgba(" + parseInt(red, 16) + "," + parseInt(green, 16) + "," + parseInt(blue, 16) + "," + alpha + ")"; 
    return color; 
} 

Jetzt, wo mein Code machen sieht Gestank und ineffizient, ist es eine Möglichkeit, einen Alpha-Wert auf einen RGB-Wert hinzuzufügen. Oder eine Funktion, die RGB in RGBA umwandelt?

Antwort

0

Könnten Sie nicht abrufen nur die Durchlässigkeitswert von Ihrem CSS wie folgt aus:

fillOpacity = $(".myClass").css("opacity"); // return 0.x 

Und dann die Durchlässigkeitswert in den ‚A‘ Kanal, den Sie brauchen übersetzen:

var alpha = fillOpacity * 255; 

Und dann an den rgb-wert (in int-form) anhängen?

EDIT:

Ich sollte erwähnen, dass das HTML5-Canvas-Element mit Bitmaps effektiv arbeitet so, während Sie einige Kombination Kleinkram tun können, so gibt es keine direkte Konzept der Schichten, dass man nicht (Soweit mir bekannt ist) sagen Sie einem Canvas-Element, dass es r, g, b, a gibt, weil es nichts zu kombinieren mit darunter gibt. Es sei denn natürlich, Sie versuchen, eine halbtransparente Leinwand über ein Hintergrundbild irgendeiner Form zu legen. Oder kombinieren Sie ein unterlagertes Bild mit "say", multiplizieren Sie die Überblendung mit Ihrer ursprünglichen CSS-Farbe, um die Wirkung einer halbtransparenten Ebene über einem Bild zu erzielen.

+0

Das ist genau was ich tue, ich habe eine Overlay-Leinwand, mit semi-undurchsichtigen gefüllten Bereichen, um bestimmte Bereiche des Hintergrundbildes hervorzuheben. Der undurchsichtige Wert wird nur im Canvas und nicht im CSS verwendet. Wie auch immer, ich muss den Alpha-Wert zu einem bestehenden RGB-Wert hinzufügen. Einen Alpha-Wert nicht abrufen. –

Verwandte Themen