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

Abbildung 4.51 Bézierkurve
Sie können die Canvas übrigens auch transformieren (Abbildung 4.52):
canvas.rotate(0.22);
canvas.fillStyle = "#eee";
canvas.fillRect(0,0,300,300);
canvas.fillStyle = "#f00";
canvas.fillRect(100,100,100,100);
Die Funktion .rotate() dreht die Zeichnung um 22 % in Uhrzeigerrichtung, der Dreh-
punkt ist der Ursprungspunkt, also die linke obere Ecke im Koordinatensystem.
Abbildung 4.52 Dergesamte Inhalt der Canvas wird transformiert.
Wie bereits erwähnt, kann canvas auch Text rendern. Dazu legen Sie zunächst Schrift-
art, Schriftgröße und Schriftstil fest:
canvas.fillStyle = "#000";
canvas.font = "bold 36px Helvetica";
canvas.fillText("Hallo Welt", 55,150);