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
- Das Interface welches es definiert,
CanvasRenderingContext2D
.