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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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