← Canvas 文字绘制方向 direction Canvas 预测文本宽度 measureText() →

Canvas 文字水平对齐 textAlign

大家有没有发现，每次文本水平方向的绘制开始的位置都是我们设置的绘制点

如果加上绘制方向 direction，那么绘制的结果就有两种

比如下面这个范例，从原点 (50,50) 开始绘制 22px Microsoft YaHei 的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.moveTo(250,0);
ctx.lineTo(250,200);
ctx.strokeStyle="red";
ctx.stroke();
ctx.font = "22px Microsoft YaHei"
ctx.fillText("简单教程，简单编程",250,50);
ctx.direction = "rtl"
ctx.fillText("简单教程，简单编程",250,75);
</script>

运行结果如下

因为某些浏览器不支持 direction 属性，所以我们截图如下

但有时候我们想居中绘制，或者左对齐基准线，或者右对齐基准线，比如下图这样

有没有办法呢？

答案是有的

但文本的水平对齐方式内容远远超过了上面这张图，而且还涉及到绘制点的关系与绘制方向，先看下图

居中对齐(center)，左对齐(left)，右对齐(right) 对于不同的绘制方向是没影响的，该怎么样还是怎么样
但是 start 和 end 对齐对于不同的绘制方向是不同的
- 如果 direction 属性设置为 ltr ，则 left 和 start 的效果相同，right 和 end 的效果相同
- 如果 direction 属性设置为 rtl ，则 left 和 end 的效果相同，right 和 start 的效果相同
居中对齐(center) 是基于在调用 fillText() 的时候所给的 x 的值，也就是说文本一半在 x 的左边，一半在 x 的右边

如果想让文本在整个 canvas 居中，就需要将 fillText() 的 x 值设置成 canvas 的宽度的一半

与 HTML/CSS 中 `textalign` 的区别

Canvas 中水平的对齐方式和 HTML/CSS 中是不一样的

HTML/CSS 中的 textAlign 对齐方式是相对于父容器的位置
Canvas 中的水平对齐方式是相对于自己绘制点的位置

它们之间的换算也很简单，就是把 Canvas 当前绘制对象的容器起始点和大小的矩形区域描述出来，然后根据换算规则去换算就好了

比如说我们把文本绘制在起始点为 (50,50) ，宽高为 (400x100) 的容器里

如果是垂直居中左对齐，那么绘制点 (x,y) 就是
```
x = 50
y = 50 + 100/2 = 100
```
如果是垂直居中右对齐，那么绘制点就是
```
x = 50 + 400     = 450
y = 50 + 100/2   = 100
```
如果是垂直水平居中，那么绘制绘制点就是
```
x = 50 + 400/2 = 250
y = 50 + 100/2 = 100
```

是不是就能和图上对应开来了

Canvas textAlign 属性

Canvas 提供了属性 textAlign 用于设置文字的水平对齐方式，默认值是 start

语法

ctx.textAlign = "left";
ctx.textAlign = "right";
ctx.textAlign = "center";
ctx.textAlign = "start"
ctx.textAlign = "end";

值	说明
left	文本左对齐
right	文本右对齐
center	文本居中对齐
start	默认值，文本对齐界线开始的地方
end	文本对齐界线结束的地方

范例

下面的代码绘制了一个居中对齐的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="500" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");

ctx.moveTo(250,0);
ctx.lineTo(250,200);
ctx.strokeStyle="red";
ctx.stroke();
ctx.textAlign="center";
ctx.font = "22px Microsoft YaHei"
ctx.fillText("简单教程，简单编程",250,50);
</script>

运行结果如下

范例 2

我们看看不同的绘制方向和不同的对齐方式对文本绘制点的影响

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
var textAlign = ['left','right','center','start','end']
var direction = ['ltr','rtl'];

ctx.strokeStyle = "red"
ctx.moveTo(250,0)
ctx.lineTo(250,800)
ctx.stroke();
ctx.font = "48px Microsoft YaHei"
ctx.fillStyle="black";
var k = 0;
for (var j = 0; j < direction.length;j++)
{
    ctx.direction = direction[j];
    console.log(ctx.direction);
    for ( var i = 0; i < textAlign.length;i++)
    {   k++;
        ctx.textAlign = textAlign[i];
        ctx.fillText("简单教程",250,60*k,500-250);
    }
    k+=1;
}
</script>

运行结果如下

← Canvas 文字绘制方向 direction Canvas 预测文本宽度 measureText() →

Canvas 文字水平对齐 textAlign

与 HTML/CSS 中 textalign 的区别

Canvas textAlign 属性

语法

范例

范例 2

Canvas 基础教程

与 HTML/CSS 中 `textalign` 的区别