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

den vierten Parameter einen Zielpunkt in Y-Richtung angeben, der tiefer als der Y-Startpunkt
liegt. Damit erhalten wir einen Farbverlauf nach rechts unten. Mit lg1.addColorStop()
legen wir zwei Stopps fest, die man minimal braucht, um von einer expliziten Startfarbe zu
einer expliziten Endfarbe zu kommen (Vorgabefarbe wäre immer Schwarz). In unserem
Beispiel haben wir also einen Farbverlauf von Weiß nach Schwarz.
Der zweite lineare Gradient ist rein horizontal. Das erkennen Sie daran, dass der Wert des
zweiten und des vierten Parameters (die Y-Angaben) gleich sind. Dafür verwenden wir
dieses Mal mehrere Stopps, um über verschiedene Farben zu gehen.
HInWEIS: Sie sollten sich bei Farbverläufen immer klarmachen, dass Sie nicht
die Form selbst damit füllen. Eine Form wird an einer gewissen Stelle gezeichnet
und der Farbverlauf scheint quasi durch. Wenn sich also ein Farbverlauf von
einer gewissen Koordinatenangabe zu einer anderen erstreckt, wird eine Form
nur den Teil von dem Farbverlauf anzeigen, in dem sie diesen Bereich überdeckt.
Ebenso gibt es im Canvas-Konzept kreisförmige ( radiale ) Gradienten, die mit createRadial
Gradient(x1, y1, r1, x2, y2, r2) erstellt werden. Die ersten drei Argumente stehen für
einen (meist inneren) Kreis mit dem Mittelpunkt an der Position x1 , y1 und dem Radius r1 .
Dieser wird mit der Startfarbe gefüllt. Die letzten drei Argumente stehen für einen weiteren
Kreis mit dem Mittelpunkt an der Position x2 , y2 und dem Radius r2 . Zwischen beiden
Kreisen verläut der radiale Farbverlauf. In der Regel umschließt der zweite Kreis vollstän-
dig den ersten Kreis, aber man kann auch spezielle Efekte (meist Kegel) erreichen, wenn
der erste Kreis außerhalb des zweiten Kreises angeordnet wird oder beide Kreise nicht das
gleiche Zentrum haben. Letzteres ist allerdings etwas kompliziert zu kontrollieren.
Beispiel für einen linearen Farbverlauf
Beispiel (kap15_.js)
Listing 14.41■ Radiale Gradienten
window.onload=function () {
var zb = document.getElementsByTagName('canvas')[0].getContext('2d');
var rb1 = zb.createRadialGradient(120,75,20,125,75,200);
rb1.addColorStop(0,'yellow');
rb1.addColorStop(1,'darkblue');
zb.illStyle = rb1;
zb.illRect(0,0,600,450);
var rb2 = zb.createRadialGradient(155,355,10,155,355,60);
rb2.addColorStop(0, '#A7D30C');
rb2.addColorStop(0.9, '#019F62');
rb2.addColorStop(1, 'rgba(1,159,98,0)');
zb.illStyle = rb2;
zb.illRect(0,200,250,250);
var rb3 = zb.createRadialGradient(210,210,10,245,235,20);
rb3.addColorStop(0,'yellow');
rb3.addColorStop(1,'lightgray');
zb.illStyle = rb3;
zb.illRect(150,10,600,450);
};