CanvasRenderingContext2D：direction 属性

CanvasRenderingContext2D.direction 属性是 Canvas 2D API 的一个属性，用于指定绘制文本时使用的当前文本方向。

值

可能的值

"ltr"

文本方向为从左到右。

"rtl"

文本方向为从右到左。

"inherit"

文本方向继承自<canvas>元素或Document（视情况而定）。默认值。

默认值为 "inherit"。

示例

更改文本方向

此示例绘制了两段文本。第一段是从左到右，第二段是从右到左。请注意，在 ltr 中的“Hi！”在 rtl 中变成了“!Hi”。

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

结果

规范

规范
HTML 标准
# dom-context-2d-direction-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅