Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzung reaktiviert werden.

CanvasRenderingContext2D.textAlign

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() (en-US) 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

BCD tables only load in the browser

Siehe auch