CanvasRenderingContext2D: textAlign-Eigenschaft

Wert

Mögliche Werte:

"left"

Der Text ist linksbündig.

"right"

Der Text ist rechtsbündig.

"center"

Der Text ist zentriert.

"start"

Der Text ist am normalen Anfang der Zeile ausgerichtet (linksbündig für von links nach rechts verlaufende Sprachen, rechtsbündig für von rechts nach links verlaufende Sprachen).

"end"

Der Text ist am normalen Ende der Zeile ausgerichtet (rechtsbündig für von links nach rechts verlaufende Sprachen, linksbündig für von rechts nach links verlaufende Sprachen).

Der Standardwert ist "start".

Beispiele

Allgemeine Textausrichtung

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

HTML

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

JavaScript

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 als "ltr" angegeben wird, obwohl dies auch der Standard für englischsprachigen Text ist.

HTML

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

JavaScript

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

Browser-Kompatibilität

Siehe auch

• Das Interface, das diese Eigenschaft definiert: CanvasRenderingContext2D