Beispiel
Erstellen Sie eine rote Linie in Position 150 Position 150 ist der Ankerpunkt für den gesamten Text im Beispiel unten definiert. Studieren Sie die Auswirkungen der einzelnen align Eigenschaft Wert:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| textAlign | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die align Eigenschaft legt liefert die aktuelle Ausrichtung für Text-Inhalt, nach dem Ankerpunkt.
Normalerweisebeginnt der Text in der angegebenen Position, aber wenn Sie align = "right" und legen Sie den Text in Position 150 gesetzt ist , bedeutet dies , dass der Text in Position 150 endet.
Tipp: Verwenden Sie die fillText() oder die strokeText() Methode tatsächlich zu ziehen und den Text auf der Leinwand zu positionieren.
| Standardwert: | Anfang |
|---|---|
| JavaScript-Syntax: | context.textAlign="center|end|left|right|start"; |
Immobilienwerte
| Werte | Beschreibung | Spiel es |
|---|---|---|
| start | Standard. Der Text beginnt an der angegebenen Position | Spiel es " |
| end | Der Text endet an der angegebenen Position | Spiel es " |
| center | Das Zentrum des Textes an der angegebenen Position plaziert | Spiel es " |
| left | Der Text beginnt an der angegebenen Position | Spiel es " |
| right | Der Text endet an der angegebenen Position | Spiel es " |