HTML and CSS Reference
In-Depth Information
Bild 2.10:
Ausgeschnittenes Quadrat aus dem Ursprungsbild.
Die praktischen Anwendungen der
drawImage()
-Methode sind vielfältig. So lassen sich
beispielsweise Bilder innerhalb von zuvor platzierten Rahmen einbinden, oder mosaik-
ähnliche Grafiken können mit vielen Einzelbildern auf einen Canvas gemalt werden.
2.3.3
Text
Die Canvas-API stellt ebenfalls je drei Methoden und Attribute zur Verfügung, um Text
auf einen Canvas zu zeichnen. Durch die Attribute
font
(Schriftart) ,
textAlign
(Text-
ausrichtung) und
textBaseline
(Textgrundlinie) kann der zu zeichnende Text näher
spezifiziert werden. Die Methoden
fillText()
und
strokeText()
arbeiten analog zu
den bekannten Methoden
fill()
und
stroke()
, die Sie von der Pfad-API kennen.
fillText()
füllt den zu zeichnenden Text komplett aus, während
strokeText()
nur
die Umrisse des Texts zeichnet. Die folgende Deklaration der Attribute und Methoden
zeigt die Standardwerte fett an.
attribute DOMString font; // "10px sans serif"
attribute DOMString textAlign; // "start", "end", "left", "right", "center"
attribute DOMString textBaseline; // "top", "hanging", "middle",
"alphabetic", "ideographic", "bottom"
void fillText(in DOMString text, in float x, in float y,
in optional float maxWidth);
void strokeText(in DOMString text, in float x, in float y,
in optional float maxWidth);
TextMetrics measureText(in DOMString text);
Die Methode
measureText()
gibt für den per Parameter übergebenen Text die Breite
in Pixeln zurück. Zwar wird ein
TextMetrics
-Objekt zurückgegeben, jedoch hat das
nur ein einziges Attribut, nämlich
width
.
Das Attribut
font
des 2-D-Kontext kann auf jeden beliebigen gültigen CSS-Font gesetzt
werden. Um die Attribute
textAlign
und
textBaseline
mit all ihren Varianten zu
verstehen, betrachten Sie am besten das folgende Beispiel. Der Reihe nach werden alle
Variationen von
textBaseLine
und
textAlign
durchgespielt.
