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

Es gibt nun lineare Farbverläufe , die mit createLinearGradient(x1, y1, x2, y2) erstellt
werden und eine horizontale Farbverschiebung zwischen zwei Endpunkten (x1, y1) und
(x2, y2) vornehmen. Die Koordinaten erlauben die Ausrichtung des Farbverlaufs in horizon-
taler und vertikaler sowie kombinierter Richtung.
Nun war schon von den Stopps die Rede. Dazu gibt es die Methode addColorStop(position,
farbe) . Die Position ist ein besagter Wert zwischen 0.0 and 1.0 für eine relative Position der
Farbe im Gradient und das zweite Argument ist die Zielfarbe. Sie können zu einem Gradien-
ten beliebig viele Stopps hinzufügen und damit einen Farbverlauf über mehrere Farben
erzeugen.
Beispiel für einen linearen Farbverlauf
Beispiel (kap14_15.js):
Listing 14.40■ Zwei lineare Gradienten
window.onload = function() {
var zb = document.getElementsByTagName('canvas')[0].getContext('2d');
var lg1 = zb.createLinearGradient(00, 00, 400, 175);
lg1.addColorStop(0, 'white');
lg1.addColorStop(1, 'black');
zb.illStyle = lg1;
zb.illRect(0, 0, 650, 195);
var lg2 = zb.createLinearGradient(0, 0, 650, 0);
lg2.addColorStop(0, '#00ABEB');
lg2.addColorStop(0.3, '#fff');
lg2.addColorStop(0.5, 'red');
lg2.addColorStop(0.75, 'yellow');
lg2.addColorStop(1, '#fff');
zb.illStyle = lg2;
zb.illRect(0, 200, 650, 450);
};
Mit zb.createLinearGradient() erzeugen wir einen linearen Gradienten, der von der
Koordinate 0,0 bis zur Koordinate 400,175 verläut. Formen, die kleiner sind, werden die-
sen Gradienten beschneiden, wenn er zugewiesen wird. Sind die Formen jedoch größer,
werden die Bereiche außerhalb des Umfangs des Gradienten mit der Endfarbe deckend
gefüllt. Beachten Sie, dass wir keinen horizontalen Farbverlauf gewählt haben, sondern durch
Bild 14.19■
Zwei lineare Gradienten