MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

CanvasRenderingContext2D.direction

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CanvasRenderingContext2D.direction 是Canvas 2D API 用来在绘制文本时,描述当前文本方向的属性。

语法

ctx.direction = "ltr" || "rtl" || "inherit";

选项

有效值:

ltr
文本方向从左向右。
rtl
文本方向从右向左。
inherit
根据情况继承 <canvas> 元素或者 Document

默认值是inherit。

示例

使用direction 属性

这是一段简单的代码片段,对文本设置不同的direction数值。

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.direction = "ltr";
ctx.strokeText("Hello world", 0, 100);

修改下面的代码并在线查看canvas的变化:

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.direction
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) [1] 未实现
bug 1095497
未实现 未实现 (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 未实现
bug 1095497
未实现 未实现 (Yes)
  • [1] 此特性默认是无效的。 通过 ExperimentalCanvasFeatures 特征标识进行启用。

参见

文档标签和贡献者

 此页面的贡献者: LiebeU, ice-i-snow
 最后编辑者: LiebeU,