例
创建在位置150的位置150中的红线是在下面的例子中定义的所有文本中的锚点。 研究每个TextAlign属性值的效果:
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"; |
属性值
值 | 描述 | 播放 |
---|---|---|
开始 | 默认。 文本开始在指定的位置 | 播放 ” |
结束 | 文本在指定的位置结束 | 播放 ” |
中央 | 文本的中心放置在指定位置 | 播放 ” |
剩下 | 文本开始在指定的位置 | 播放 ” |
对 | 文本在指定的位置结束 | 播放 ” |
<画布对象