最新的Web开发教程
 

HTML canvas textAlign Propery

<HTML画布参考

创建在位置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 9

定义和用法

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

通常情况下,文本将在指定的位置开始 ,但是,如果你请将textAlign =“正确的”,并放置在适当的位置150的文本,这意味着该文本应 150位结束

提示:使用fillText()strokeText()方法来实际绘制,并在画布上定位文本。

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

属性值

描述 播放
start 默认。 文本开始在指定的位置 播放 ”
end 该文本在指定位置结束 播放 ”
center 文本的中心放置在指定位置 播放 ”
left 文本开始在指定的位置 播放 ”
right 该文本在指定位置结束 播放 ”

<HTML画布参考