Die CanvasRenderingContext2D.textAlign Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.

Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der fillText() Methode basiert. Wenn textAlign  "center" ist,  dann würde der Text an der Stelle x - (width / 2) gezeichnet werden.

Syntax

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Optionen

Mögliche Werte:

left
Der Text wird linksbündig ausgerichtet.
right
Der Text wird rechtsbündig ausgerichtet.
center
Der Text wird zentiert ausgerichtet.
start
Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).
end
Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).

Der Standardwert ist start.

Beispiele

Benutzung der textAlign Eigenschaft

Ein einfaches Beispiel welches die textAlign Eigenschaft benutzt um die Textausrichtung zu ändern.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '48px serif';
ctx.textAlign = 'left';
ctx.strokeText('Hello world', 0, 100);

Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:

Spezifikationen

Specification Status Comment
HTML Living Standard
Die Definition von 'CanvasRenderingContext2D.textAlign' in dieser Spezifikation.
Lebender Standard  

Browserkompatibilität

FunktionChromeEdgeFirefoxInternet ExplorerOperaSafari
Grundlegende Unterstützung Ja123.5 Ja Ja Ja
FunktionAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Grundlegende Unterstützung Ja Ja Ja4 Ja Ja Ja

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: marco-a
Zuletzt aktualisiert von: marco-a,