Information Technology Reference
In-Depth Information
liegenden Farben werden ihrem Offset entsprechend aufgeteilt, und Übergän-
ge zwischen den einzelnen Stopps werden vom Browser im RGBA-Farbraum
interpoliert.
linGrad.addColorStop(0.0, 'red');
linGrad.addColorStop(0.5, 'yellow');
linGrad.addColorStop(0.7, 'orange');
linGrad.addColorStop(1.0, 'purple');
Farbangaben folgen wieder den Regeln für CSS-Farbwerte und sind im Bei-
spiel zur besseren Lesbarkeit als SVG-Farbnamen ausgewiesen. Damit ist un-
sere lineare Gradiente fertig und kann über
fillStyle
oder
strokeStyle
zuge-
wiesen werden.
context.fillStyle = linGrad;
context.fillRect(0,450,1000,300);
Im Gegensatz zu linearen Farbverläufen liegen Start und Endpunkt bei radialen
Gradienten nicht als Punkte, sondern Kreise vor, weshalb wir nun zur Definition
der Gradiente die Methode
context.createRadialGradient(x0, y0, r0, x1, y1,
r1)
verwenden müssen.
Abbildung 5.5:
Komponenten einer radialen Gradiente
