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 auch strokeStyle 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();
}

Beispiel ansehen.

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.

Beispiel ansehen.

Ein letztes Beispiel zeigt die Verwendung von Farbverläufen im Zusammenhang mit Texten.

Beispiel ansehen.