CanvasRenderingContext2D.direction - Web API 接口参考 编辑

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

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

Playable code

<canvas id="canvas" width="550" height="500"></canvas>

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

结果

规范描述

浏览器兼容性

BCD tables only load in the browser

此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。

参见

• 接口定义， CanvasRenderingContext2D.