HTML5 in der mobilen Webentwicklung - HTML5-Apps fur iPhone und Android - page 86

}

var metrics ctx.measureText('align');
ctx.beginPath();
var centerTextX 200+(metrics.width/2)
ctx.moveTo(centerTextX, 20);
ctx.lineTo(centerTextX, 280)
ctx.stroke();

var textAlign ["start", "end", "left", "right", "center"];
for (pos in textAlign)
{
ctx.textAlign textAlign[pos];
y (20 + (40*pos));
ctx.fillText('align', centerTextX, y);
}
}

2.3.4 Füllstil, Strichstil, Linienstil

Wir haben die Attribute fillStyle , strokeStyle und sämtliche Attribute zur Defini-
tion der Linien bereits in vorherigen Beispielen mehr oder weniger bewusst eingesetzt,
da jedes Attribute einen Standardwert besitzt. fillStyle gibt an, wie eine zu füllende
Fläche gefüllt werden soll. Soll es beispielsweise ein CSS-Farbwert sein (mit oder ohne
Transparenz), ein Farbverlauf oder ein Muster? Ähnlich wie fillStyle gibt
strokeStyle die Füllung der zu zeichnenden Linie an. Das ist sicherlich etwas unge-
wöhnlich, aber die Art der Linie selbst kontrollieren die Attribute lineWidth , lineCap ,
lineJoin und miterLimit . Auf all diese Attribute wird in diesem Abschnitt noch ein-
gegangen.

Den Attributen fillStyle und strokeStyle kann entweder ein gültiger CSS-Farbwert
(z. B. #FF0000 oder rgb(255,0,0) ), ein Verlauf oder ein Muster zugewiesen werden.
Auf Verläufe und Muster gehen wir im nächsten Abschnitt ein, die Beispiele hier ver-
wenden lediglich CSS-Farbwerte.

Fangen wir doch gleich mit fillStyle an. Das folgende Beispiel zeichnet insgesamt
zehn Quadrate auf einen Canvas, jeweils mit unterschiedlichem CSS-Farbwert und an
anderer Position: