HTML-Canvas textAlign-Attribute
Beispiele
Erstellen Sie eine rote Linie an Position 150. Position 150 ist der Ankerpunkt für den gesamten im folgenden Beispiel definierten Text. Untersuchen Sie die Auswirkung jedes Werts der textAlign-Eigenschaft:
JavaScript：
var ctx=c.getContext("2d");
// Erstelle eine rote Linie an Position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Zeige die verschiedenen textAlign-Werte
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);
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die textAlign-Eigenschaft.
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die textAlign-Eigenschaft legt die aktuelle Ausrichtung des Textinhalts basierend auf dem Ankerpunkt fest oder gibt sie zurück.
Normalerweise wird der Text von der angegebenen Position ausbeginnen, wenn Sie jedoch textAlign="right" festlegen und den Text an Position 150 platzieren, dann wird eran Position 150 enden。
Tipp:Bitte verwenden Sie diefillText()- oderstrokeText()-Methode, um Text tatsächlich auf dem Canvas zu zeichnen und zu positionieren.
| Standardwert: | start |
|---|---|
| JavaScript-Syntax: | context.textAlign="center|end|left|right|start"; |
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| start | Standard. Der Text beginnt an der angegebenen Position. |
| end | Der Text endet an der angegebenen Position. |
| center | Die Mitte des Textes wird an der angegebenen Position platziert. |
| left | Der Text beginnt an der angegebenen Position. |
| right | Der Text endet an der angegebenen Position. |
HTML-Canvas-Referenzhandbuch Weitere Erweiterungen