HTML Canvas textAlign Eigenschaft
Definition und Verwendung
textAlign Eigenschaft basierend auf dem Anker, setzt oder gibt die aktuelle Ausrichtung des Textinhalts zurück.
Normalerweise beginnt der Text am angegebenen Ort, aber wenn Sie textAlign="right" setzen und den Text in Position 150 platzieren, wird er an Position 150 enden.
Hinweis:verwendet fillText() oder strokeText() Methoden zeichnen tatsächlich Text auf die Leinwand und positionieren ihn.
Beispiel
Erstelle eine Linie in Position 150. Position 150 ist der Anker für alle Texte im folgenden Beispiel. Studiere die Wirkung jeder textAlign-Eigenschaftswert:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
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);
Syntax
context.textAlign="center|end|left|right|start";
Attributswert
| Wert | Beschreibung |
|---|---|
| start | Standard. Der Text beginnt an der angegebenen Position. |
| end | Der Text endet an der angegebenen Position. |
| center | Der Text wird in der angegebenen Position zentriert. |
| left | Text linksbündig ausrichten. |
| right | Text rechtsbündig ausrichten. |
Technische Details
| Standardwert: | start |
|---|
Browser-Unterstützung
Die in der Tabelle genannten Zahlen geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
