Canvas - HTML5 - page 127

Im linken Teil der Grafik erkennen wir Start- und Endkreis, in der Mitte die
drei Farbstopps mit Offset-Werten und rechts das Endresultat: eine Kugel mit
Lichteffekt. So ansprechend das Ergebnis ist, so einfach und übersichtlich ist
auch der Quellcode:
var radGrad = context.createRadialGradient(
260,320,40,200,400,200
);
radGrad.addColorStop(0.0,'yellow');
radGrad.addColorStop(0.9,'orange');
radGrad.addColorStop(1.0,'rgba(0,0,0,0)');
context.fillStyle = radGrad;
context.fillRect(0,200,400,400);
Der Schatteneffekt am Kugelrand entsteht übrigens durch die beiden letz-
ten Farbstopps, bei denen auf kürzestem Weg von Orange zu transparentem
Schwarz interpoliert wird, wodurch der sichtbare Teil der Gradiente direkt am
Außenkreis endet.
Nach diesem Ausflug in die Welt der Farben und Farbverläufe wenden wir uns
im nächsten Kapitel weiteren geometrischen Formen zu, den Pfaden.
5.5 Pfade
Die Abläufe beim Erstellen von Pfaden in Canvas sind vergleichbar mit dem
Zeichnen auf einem Blatt Papier: Stift an einer Position am Blatt absetzen,
Zeichnen, Stift wieder anheben und nach Belieben an anderer Stelle weiter-
zeichnen. Zeicheninhalte können dabei von einfachen Linien über komplexe
Kurven bis hin zu daraus gebildeten Polygonen reichen. Ein erstes Beispiel ver-
deutlicht dieses Konzept und übersetzt die Schritte beim Schreiben des Buch-
stabens A in Canvas-Pfadbefehle:
context.beginPath();
context.moveTo(300,700);
context.lineTo(600,100);
context.lineTo(900,700);
context.moveTo(350,400);
context.lineTo(850,400);
context.stroke();