CanvasRenderingContext2D.direction

Experimental

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

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.fillText('Hi!', 150, 50);
ctx.direction = 'rtl';
ctx.fillText('Hi!', 150, 130);

结果

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.direction
Living Standard

浏览器兼容性

BCD tables only load in the browser

参见