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

Bild 2.12: Auf einen Canvas werden zehn Quadrate gezeichnet.
//fillStyle can be CSS color value, a gradient object, or a pattern object
for (var i 0; i < 10; i++){
ctx.fillStyle "rgb("+(Math.floor((255/10)*i))+",0, 0)";
ctx.fillRect(i*28, i*28, 28, 28);
ctx.fillStyle "rgb(0,"+(Math.floor((255/10)*i))+", 0)";
ctx.fillRect(252 (i*28), i*28, 28, 28);
}
fillStyle wird im obigen Beispiel je ein CSS-Farbwert zugewiesen. Seit CSS 3 gibt es
die Möglichkeit, die Transparenz der Farbe durch rgba() anzugeben. Im Folgenden
wird die Farbe Grün mit 50 % Transparenz definiert und fillStyle zugewiesen:
ctx.fillStyle 'rgba(0,255,0,0.5)';
Zwar kann die Transparenz auch über das globalAlpha -Attribut zugewiesen werden,
allerdings erreicht die Benutzung von rgba eine kompaktere Schreibweise.
Analog zu fillStyle wird auch strokeStyle angegeben Folgendes Beispiel zeichnet
150 horizontale Linien auf den Canvas mit je 1 Pixel Abstand. Mit jedem Durchlauf wird
der Rotwert verändert, sodass die Linien langsam von Schwarz nach Rot übergehen.
Zum Schluss werden noch zwei Rechtecke über diese Linien gezeichnet, die aus Quad-
raten unterschiedlicher Transparenz und Farbe bestehen.
Bild 2.13: Auf einen Canvas werden
150 Linien mit je 1 Pixel Abstand gezeichnet.
for (var i 0; i < 300; i+ 2){
ctx.strokeStyle "rgb("+Math.floor((255/300)*i)+",0, 0)";
ctx.beginPath();