HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 192

Neben einfachen und transparenten Farben können Sie Objekte auf der Canvas auch
mit Farbverläufen füllen:
var verlauf = canvas.createLinearGradient(0,0,300,300);
verlauf.addColorStop(0, "white");
verlauf.addColorStop(1, "black");
canvas.fillStyle = verlauf;
canvas.fillRect(50,50,200,200);
Zunächst müssen Sie eine Variable anlegen, der Sie einen Verlauf zuweisen. Den
Startpunkt und die Größe definieren Sie analog zu der des Rechtecks. Anschließend
werden Farben hinzugefügt. Der Verlauf im Beispiel beginnt mit Weiß in der linken
oberen Ecke und verläuft in Schwarz bis in die untere rechte Ecke.
Weisen Sie anschließend dem Füllstil der Canvas Ihre Verlaufsvariable zu. Wenn Sie
nun mit .fillRect() ein Rechteck zeichnen, wird dieses mit ihrem Farbverlauf gefüllt
(Abbildung 4.49).
Abbildung 4.49 Farbverlauf
Analog zu gefüllten Objekten können Sie natürlich auch einfache Linien zeichnen.
Dazu müssen Sie zunächst den Strichstil und die Linienbreite zuweisen:
canvas.strokeStyle = "#000";
canvas.lineWidth = 10;
canvas.beginPath();
canvas.moveTo(50, 50);
canvas.lineTo(200, 200);
canvas.stroke();