JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 428

In dem Beispiel erstellen wir drei radiale Gradienten. Zwei davon werden mit einem äuße-
ren Kreis erstellt, der vollständig den inneren Kreis umfasst, ein Gradient macht das nicht.
Beim ersten Gradienten wird ein innerer Kreis an den Koordinaten 120, 75 mit dem Umfang
von 20 Pixeln angelegt. Er wird mit der Startfarbe gefüllt (Sie können erkennen, dass das
Gelb ist). Die Zielfarbe wird Dunkelblau sein. Beachten Sie, dass wir die Stopps bei 0 und
1.0 setzen und somit nur zwischen die beiden Farben interpolieren. Wie Sie weiter sehen
können, ist das Zentrum des zweiten Kreises ebenfalls 120, 75. Beide Kreise haben also den
gleichen Ursprung. Allerdings ist der Radius des zweiten Kreises 200 Pixel. Und der Farb-
verlauf wird sich streng kreisförmig vom inneren zum äußeren Kreis entwickeln. Außer-
halb des Kreises wirkt die Endfarbe Dunkelblau weiter, es sei denn, eine neue Farbfüllung
überdeckt diese. Ebenso müssen Sie wieder daran denken, dass der Farbverlauf nur da zu
sehen ist, wo eine Form ihn quasi „aufdeckt“. Da das nachfolgende Rechteck exakt die
Abmessungen des ersten Gradienten hat, wird dieser erst einmal das ganze Rechteck füllen.
Schauen wir uns den zweiten Gradienten an. Der Ursprung des inneren und äußeren Krei-
ses ist 155,355. Damit liegen die beiden Kreise also wieder symmetrisch zueinander. Der
Radius des inneren Kreises ist 10 Pixel und des äußeren Kreises 60 Pixel. Beim zweiten
Gradienten verwenden wir wieder mehrere Stopps, aber das ist nichts Neues. Nur sollten
Sie bei der Endfarbe beachten, dass wir die Funktion rgba() verwenden und die Transpa-
renz auf 0 setzen. Das hat zur Folge, dass die Endfarbe von diesem Gradienten mit dem
äußeren Kreis endet. Damit wirkt die Endfarbe vom ersten Gradienten dahinter weiter.
Der dritte Gradient ist insofern bemerkenswert, dass die beiden Kreise sich überhaupt nicht
überdecken. Der Farbverlauf entwickelt sich als Kegel in Richtung des zweiten Kreises und
nimmt beim Erreichen die Zielfarbe an. Der Winkel des Kegels ergibt sich durch die Größe
und den Abstand der beiden Kreise. Der Farbverlauf entwickelt sich durch die verschobe-
nen Ursprünge asymmetrisch (wie natürlich gewünscht).
Bild 14.20■
Radiale Gradienten
PrAXISTIPP: Mit radialen Farbverläufen, die am Ende transparent werden,
können Sie auch gezielt Kreise und Ellipsen erstellen. Für diese gibt es keine
explizite Methode im API - wobei es aber Methoden für Kreissegmente und
Kurven gibt, die das auch gestatten.