Lineare Farbverläufe im Canvas-Element
Einfache und komplexere Grafikobjekte in einem Canvas-Element können nicht nur einfarbig in Erscheinung treten. Das Canvas-Element bietet darüber hinaus auch die Möglichkeit einer differenzierten farblichen Gestaltung mit Hilfe von Farbverläufen. Derartige Farbverläufe werden meist als Gradients / Gradienten bezeichnet. Dabei werden grundsätzlich zwei Arten von Farbverläufen unterschieden:
- lineare Gradienten
- radiale Gradienten
Ich beschreibe hier lineare Gradienten.
Allgemeine Vorgehensweise bei der Verwendung linearer Farbverläufe
Im Unterschied zur Verwendung einfacher Farben mit strokeStyle (Farbattribut)
oder fillStyle (Farbattribut)
muss man zur Verwendung von Gradienten mehrere Einzelschritte befolgen:
- Canvas-Objekt referenzieren
- 2D-Context erstellen mit
getContext
- im 2D-Context linearen Gradienten erstellen mit
createLinearGradient
- dem Gradienten Farbverlaufspunkte zuweisen mit
addColorstop
- den Gradienten mit
fillStyle
oder auchstrokeStyle
aktivieren.
Syntax
createLinearGradient
Der allgemeines Syntax dieser Methode sieht so aus:
var gradientvariable=context.createLinearGradient (StartX, StartY, EndX, EndY)
Die Parameter sind immer in Beziehung zu dem mit dem Gradienten zu zeichnenden Objekt zu sehen (siehe Beispiele). Wenn StartX=EndX dann wird ein Gradient von oben nach unten gezeichnet. Wenn StartY=EndY dann wird ein Gardient mit Verlauf von links nach rechts gezeichnet.
addColorStop
gradientvariable.addColorStop(Position, Farbwert)
Position ist ein Wert im Bereich 0 bis 1
Farbwert kann ein als Hexadezimalwert '#rrggbb' (Kurzform '#rgb') angegeben werden oder mit der Funktion 'rgb(rot,grün,blau)'. Mit 'rgba(rot,grün,blau,alpha)' kann ein Farbwert mit Alphatranparenz erzeugt werden.
Beispiele zur Verwendung von Gradienten
Beispiel mit einem linearen Farbverlauf, horizontal
Der Quellcode dieses Beispiels sieht so aus:
var myCanvas = document.getElementById('canvas_id'); if(myCanvas.getContext){ var cx = myCanvas.getContext('2d'); //Zeichnungsfläche löschen clean(cx); //Einstellungen sichern cx.save(); //Gradientobjekt erstellen var cxlg=cx.createLinearGradient(0, 0, 280, 0); //Farbpunkte festlegen cxlg.addColorStop(0, '#f00');//von Anfang rot cxlg.addColorStop(0.5, '#0f0');//50% gruen cxlg.addColorStop(1.0, '#00f');//100% blau //Gradient als Fuellstil festlegen cx.fillStyle=cxlg; cx.fillRect(0,0,280,100); //Einstellungen wiederherstellen cx.restore(); }
Wenn ein linearer Gradient horizontal verlaufen soll, müssen bei der Methode createLinearGradient
die y-Angaben den gleichen Wert haben. Ein weiteres Beispiel soll zeigen, wie man einen linearen Gradient in diagonaler Richtung festlegt.
Beispiel mit einem linearen Farbverlauf, diagonal
Um bei einem linearen Farbverlauf einen diagonalen Effekt zu erzeilen, müssen y-Werte und x-Werte unterschiedlich sein.
var cxlg=cx.createLinearGradient(0, 0, 280, 100); //Farbpunkte festlegen cxlg.addColorStop(0, '#f00');//von Anfang rot cxlg.addColorStop(0.5, '#0f0');//50% gruen cxlg.addColorStop(1.0, '#00f');//100% blau cx.fillStyle=cxlg; cx.fillRect(0,0,280,100); cx.fillRect(290,0,280,100); cx.fillRect(0,110,220,100);
Außerdem wird an diesem Beispiel gezeigt, dass die Koordinatenangaben von createLinearGradient
immer mit dem zu zeichnenden Objekt in Übereinstimmung stehen müssen, ansonsten wird der Gardient nur unvollständig vom Objekt genutzt.
Ein letztes Beispiel zeigt die Verwendung von Farbverläufen im Zusammenhang mit Texten.