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

auch die Transparenz). Darüber hinaus - und da greifen wir etwas vor - werden die Position
und die Höhe des Rechtecks, das in jedem Schleifendurchlauf gezeichnet wird, in Abhängig-
keit von dem Zählindex verändert. Das führt dazu, dass sich die Farbe in kleinen Schritten
verändert sowie in der Transparenz abschwächt und die Graik zu einer neuen perspektivi-
schen Form verschwimmt, die mit einer Art Farbverlauf gefüllt ist. Hier zeigt sich ganz
deutlich, dass eine neue Form im Graikkontext nicht dazu führt, dass die vorhandenen
Formen gelöscht werden. Neue Formen werden einfach hinzugefügt.
rahmen und Außenlinie manipulieren
Sie können aber auch den Rahmen bzw. die Außenlinie manipulieren (kap14_14.js):
Listing 14.39■ Den Rahmen beeinlussen
window.onload = function() {
var zeichnenbereich =
document.getElementsByTagName('canvas')[0].getContext('2d');
for (var i = 3; i < 255; i++) {
zeichnenbereich.strokeStyle = 'rgb(' + i + ',' + (255) + ',' + i + ')';
zeichnenbereich.strokeRect(i * 2, i, 25 + i, 40);
}
};
In dem Beispiel setzen wir die Eigenschat strokeStyle in einer Schleife über die CSS-
Funktion rgb() . Damit wir einen Rahmen sehen, verwenden wir statt illRect() für ein
gefülltes Rechteck strokeRect() , was nur einen Rahmen zeichnet.
Bild 14.18■
Der Rahmen der Rechtecke wird in der
Farbe manipuliert.
14.5.1.6■Gradienten
Wir haben gerade so eine Art Farbverlauf über Schleifen demonstriert, aber bei Canvas -
Objekten muss man das gar nicht von Hand erledigten. Es gibt bereits implementierte Farb-
verläufe ( Gradienten ) - das canvasGradient -Objekt. Die meisten visuellen Elemente kön-
nen Sie damit auch füllen. Ein Farbverlauf bedeutet eine gleichmäßige Veränderung von
einer Farbe in eine andere. Die Endpunkte der Farbveränderungen zwischen zwei Farben
werden Stopps genannt. Stopps können an beliebig vielen Punkten zwischen 0 und 1 einge-
fügt werden und erlauben so das Zusammensetzen von mehreren Farbübergängen zu einem
einzigen Farbverlauf. Später werden sie skaliert, um in den gewählten Zielbereich für den
Farbverlauf zu passen. Aufeinanderfolgende Stopps müssen immer einen größeren ofset-
Wert haben als die Vorgänger.