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 Wirkung jeder 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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die align Eigenschaftssätze oder gibt die aktuelle Ausrichtung für Textinhalt entsprechend den Ankerpunkt.
Normalerweise wird der Text START 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 enden soll.
Tip: 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"; |
Eigenschaftswerte
| Werte | Beschreibung | Spiel es |
|---|---|---|
| Anfang | Standard. Der Text beginnt an der angegebenen Position | Spiel es " |
| Ende | Der Text endet an der angegebenen Position | Spiel es " |
| Center | Das Zentrum des Textes an der angegebenen Position plaziert | Spiel es " |
| links | Der Text beginnt an der angegebenen Position | Spiel es " |
| Recht | Der Text endet an der angegebenen Position | Spiel es " |
<Canvas Object