Information Technology Reference
In-Depth Information
5.4 Farbverläufe
Als Ergänzung zu Vollfarben für Füllungen und Linien hält Canvas zwei Arten
von Farbverläufen bereit: lineare und radiale Gradienten. Am Beispiel eines ein-
fachen Farbverlaufes von Rot über Gelb und Orange nach Violett lässt sich das
Grundprinzip beim Erstellen von Gradienten in Canvas leicht demonstrieren.
Abbildung 5.4:
Lineare Gradiente mit vier Farben
Zuerst erzeugt
context.createLinearGradient(x0, y0, x1, y1)
ein
CanvasGra-
dient
-Objekt und legt dabei über die Parameter
x0
,
y0
,
x1
,
y1
die Richtung des
Farbverlaufs fest. Da wir in einem weiteren Schritt noch Farboffsets bestim-
men müssen, speichern wir dieses Objekt in der Variablen
linGrad
.
var linGrad = context.createLinearGradient(
0,450,1000,300
);
Die Methode
addColorStop(offset, color)
des
CanvasGradient
-Objekts dient
in einem zweiten Schritt zum Wählen der gewünschten Farben und deren Off-
sets auf unserer imaginären Farbverlaufslinie. Offset 0.0 steht für die Farbe am
Punkt
x0
/
y0
und Offset 1.0 für die Farbe am Endpunkt
x1
/
y1
. Alle dazwischen
