CanvasRenderingContext2D: direction-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Mai 2022 browserübergreifend verfügbar.
Die Eigenschaft CanvasRenderingContext2D.direction der Canvas 2D-API gibt die aktuelle Textrichtung an, die zum Zeichnen von Text verwendet wird.
Wert
Mögliche Werte:
"ltr"-
Die Textrichtung ist von links nach rechts.
"rtl"-
Die Textrichtung ist von rechts nach links.
"inherit"-
Die Textrichtung wird vom
<canvas>-Element oder demDocumententsprechend geerbt. Standardwert.
Der Standardwert ist "inherit".
Beispiele
Ändern der Textrichtung
In diesem Beispiel werden zwei Textstücke gezeichnet. Das erste ist von links nach rechts, und das zweite ist von rechts nach links. Beachten Sie, dass "Hi!" in ltr zu "!Hi" in rtl wird.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hi!", 150, 50);
ctx.direction = "rtl";
ctx.fillText("Hi!", 150, 130);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-context-2d-direction-dev |
Browser-Kompatibilität
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D