Canvas textAlign Eigenschaft
Definition und Verwendung
textAlign Eigenschaften basierend auf dem Anker, um den aktuellen Ausrichtungswert des Textinhalts zu setzen oder zurückzugeben.
Normalerweise beginnt der Text am angegebenen Ort, aber wenn Sie textAlign="right" einstellen und den Text an Position 150 platzieren, endet der Text in Position 150.
Hinweis:verwendet fillText() oder strokeText() Die Methode zeichnet tatsächlich Text auf die Leinwand und positioniert ihn.
Beispiel
Erstellen Sie eine Linie in der Position 150. Die Position 150 ist der Anker für alle Texte in den folgenden Beispielen. Studieren Sie die Auswirkungen 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);
语法
上下文.textAlign="center|end|left|right|start";
属性值
| 值 | 描述 |
|---|---|
| start | 标准。文本在指定的位置开始。 |
| end | 文本在指定的位置结束。 |
| center | 文本的中心被放置在指定的位置。 |
| left | 文本左对齐。 |
| right | 文本右对齐。 |
技术细节
| 标准值： | start |
|---|
Browser-Unterstützung
Die in der Tabelle angegebenen Zahlen zeigen die erste Browser-Version, 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.
