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 上查看此页面 • 报告此内容的错误