CanvasRenderingContext2D: textAlign-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.textAlign-Eigenschaft der Canvas 2D API gibt die aktuelle Textausrichtung an, die beim Zeichnen von Text verwendet wird.

Die Ausrichtung ist relativ zum x-Wert der fillText()-Methode. Zum Beispiel, wenn textAlign auf "center" gesetzt ist, wird die linke Kante des Textes bei x - (textWidth / 2) sein.

Wert

Mögliche Werte:

"left"

Der Text ist linksbündig.

Der Text ist rechtsbündig.

"center"

Der Text ist zentriert.

"start"

Der Text ist am normalen Anfang der Zeile ausgerichtet (links für links-nach-rechts-Sprachen, rechts für rechts-nach-links-Sprachen).

"end"

Der Text ist am normalen Ende der Zeile ausgerichtet (rechts für links-nach-rechts-Sprachen, links für rechts-nach-links-Sprachen).

Der Standardwert ist "start".

Beispiele

Allgemeine Textausrichtung

Dieses Beispiel demonstriert die drei "physischen" Werte der textAlign-Eigenschaft: "left", "center" und "right".

HTML

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

JavaScript

js
const canvas = document.getElementById("canvas");
canvas.width = 350;
const ctx = canvas.getContext("2d");
const x = canvas.width / 2;

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);

Ergebnis

Richtungsabhängige Textausrichtung

Dieses Beispiel demonstriert die zwei richtungsabhängigen Werte der textAlign-Eigenschaft: "start" und "end". Beachten Sie, dass die direction-Eigenschaft manuell auf "ltr" gesetzt ist, obwohl dies auch der Standard für englischsprachige Texte ist.

HTML

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

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px serif";
ctx.direction = "ltr";

ctx.textAlign = "start";
ctx.fillText("Start-aligned", 0, 50);

ctx.textAlign = "end";
ctx.fillText("End-aligned", canvas.width, 120);

Ergebnis

Spezifikationen

Specification
HTML
# dom-context-2d-textalign-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textAlign

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch