CanvasRenderingContext2D: direction 屬性

Baseline 已廣泛支援

此功能已成熟，並可在許多裝置和瀏覽器版本上使用。自 2022 年 5 月以來，它已在各個瀏覽器中可用。

Canvas 2D API 的 CanvasRenderingContext2D.direction 屬性用於指定繪製文字時使用的當前文字方向。

值

可能的值

"ltr": 文字方向為從左到右。
"rtl": 文字方向為從右到左。
"inherit": 文字方向會根據需要從 <canvas> 元素或 Document 中繼承。這是預設值。

預設值為 "inherit"。

示例

更改文字方向

此示例繪製了兩段文字。第一段是從左到右，第二段是從右到左。請注意，在 ltr 中為 "Hi!"，在 rtl 中則變為 "!Hi"。

HTML

html

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

JavaScript

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);

結果

規範

規範
HTML # dom-context-2d-direction-dev

瀏覽器相容性

另見

定義此屬性的介面：CanvasRenderingContext2D

幫助改進 MDN

瞭解如何貢獻

本頁最後修改於 2025年9月25日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤