Information Technology Reference
In-Depth Information
var circle = function(cx,cy,r,anticlockwise) {
context.moveTo(cx+r,cy);
context.arc(cx,cy,r,0,Math.PI*2.0,anticlockwise);
};
Der Code für den rechten Kreis mit Loch ergibt sich demnach folgendermaßen:
context.beginPath();
context.fillStyle = 'yellow';
circle(900,400,240,0);
circle(900,400,120,1);
context.fill();
context.stroke();
Nach
stroke()
und
fill()
fehlt uns damit nur noch eine einzige Methode beim
Zeichnen von Pfaden, nämlich die Methode:
context.clip()
So kurz wie ihr Name fällt auch die Erklärung aus:
clip()
sorgt dafür, dass
der definierte Pfad nicht gezeichnet, sondern als Ausstechform für alle wei-
teren Zeichenelemente verwendet wird. Alles, was innerhalb der Maske liegt,
ist sichtbar, der Rest bleibt verborgen. Zurücksetzen kann man diese Maske,
indem man eine weitere Clipmaske mit der gesamten Canvas-Fläche als Geo-
metrie erstellt. Eine elegantere Methode wird uns erst viel später in Abschnitt
5.13 bei
save()
und
restore()
begegnen.
Als Nächstes wollen wir uns allerdings dem Thema Text zuwenden, einem The-
ma, das in der Spezifikation gerade einmal vier Seiten einnimmt. Kann es sein,
dass es um die Textunterstützung in Canvas nicht gut bestellt ist?
5.6 Text
Auf den ersten Blick lautet die Antwort wohl eher
Ja
, denn die Einsatzmöglich-
keiten für Text in Canvas sind begrenzt und beschränken sich auf das Forma-
tieren und Positionieren von einfachen Zeichenketten. Fließtext mit automati-
schen Zeilenumbrüchen wird man ebenso vermissen wie Absatzformate oder
auch die Selektierbarkeit bereits erstellter Texte.
Was bleibt, sind drei Attribute zur Bestimmung der Texteigenschaften, zwei
Methoden zum Zeichnen von Texten und eine Methode zur Ermittlung der Text-
länge einer Zeichenkette unter Berücksichtigung des aktuell eingestellten
