最新的Web开发教程
 

HTML canvas textAlign Propery

<画布对象

创建在位置150的位置150中的红线是在下面的例子中定义的所有文本中的锚点。 研究每个TextAlign属性值的效果:

YourbrowserdoesnotsupporttheHTML5canvastag。

JavaScript的:

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

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
试一试»

浏览器支持

在表中的数字规定,完全支持该财产浏览器版本。

属性
textAlign 4 9 3.6 4 10.1

定义和用法

TextAlign属性设置或返回文本内容的当前对准,根据锚点。

通常情况下,文本将START在指定的位置,但是,如果你请将textAlign =“右”,把文本中的位置150,这意味着该文本应位置150 结束

Tip:使用fillText()strokeText()方法以实际绘制并在画布上定位文本。

默认值: 开始
JavaScript语法: context .textAlign="center|end|left|right|start";

属性值

描述 播放
开始 默认。 文本开始在指定的位置 播放 ”
结束 文本在指定的位置结束 播放 ”
中央 文本的中心放置在指定位置 播放 ”
剩下 文本开始在指定的位置 播放 ”
文本在指定的位置结束 播放 ”

<画布对象