CanvasRenderingContext2D: textAlign-Eigenschaft

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 (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".

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

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

<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

• Das Interface, das diese Eigenschaft definiert: CanvasRenderingContext2D