文本水平对齐方式

文本对齐方式针对的是我们前两节讲的绘制文本的，文本对齐方式分为水平对齐和垂直对齐两种，本小节我们学习水平对齐方式的设定。

我们前两节在学习绘制文本的时候，都是设定了一行和一对坐标点后开始绘制的，绘制的文本也是从我们给定的点开始。当然，canvas 也是将我们给定的点作为单行文本的中点或者终点，这就要用到文本水平对齐：textAlign了。

我们看例子：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
    <script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.font="20px 微软雅黑"
		
		ctx.textAlign = "left" //设置绘制文本的给定点为文本左侧
		ctx.fillText("Wiki", , )
		
		
		ctx.textAlign = "center" //设置绘制文本的给定点为文本中间
		ctx.fillText("Wiki", , )
		
		
		ctx.textAlign = "right" //设置绘制文本的给定点为文本右侧
		ctx.fillText("Wiki", , )
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.Style="#ccc";
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.();
	
	</script>
<body>
</html>

运行结果：

我们将上面例子的主要拆分讲解：

设置字体大小以及字体样式，font 属于全局，设定一次，后面所有绘制都会受到影响。

ctx.font="20px 微软雅黑"

设定水平对齐方式为左对齐，即以我们给定的锚点 (150, 30) 为文本起点，left 值也是认值。

ctx.textAlign = "left"
ctx.fillText("Wiki", 150, 30)

设定水平对齐方式为居中对齐，即以我们给定的锚点 (150, 80) 为文本中点。

ctx.textAlign = "center"
ctx.fillText("Wiki", 150, 80)

设定水平对齐方式为右对齐，即以我们给定的锚点 (150, 130) 为文本最右点。

ctx.textAlign = "right"
ctx.fillText("Wiki", 150, 130)

绘制一条辅助参考线。

ctx.beginPath()
 ctx.Style="#ccc";
 ctx.moveTo(150,0);
 ctx.lineTo(150,150);
 ctx.();

上面我们列举了 textAlign 的三个值，left，center，right，其实 textAlign 还有两个值：start 和 end，这两个值在认情况下和 left、right 的作用完全一样，即：start 等同于 left，end 等同于 right，那么问题来了，start 和 left 在什么情况下表现不相同呢？

要想回答上面的问题，我们需要先弄明白 浏览器的文本方向。

我们使用的浏览器认的文本方向都是从左向右的，即 ltr 模式，这和我们的阅读习惯是相同的（ltr = left to right），但是浏览器还提供了一种阅读方式，rtl 模式，就是从右向左的阅读方向。

在浏览器 ltr 模式下，也就是正常模式下，start 的作用和 left 是相同的，end 的作用和 right 的作用是相同的。

如果浏览器设置了文本方向从右向左，即 rtl 模式，那么对齐方式刚好相反，start 的作用和 right 是相同的， end 的表现和 left 的表现是相同的。

canvas也为我们提供了画布文本方向的 direction，该可以画布的文本方向，该主要影响 start 和 end 的表现。

direction 还未被纳入标准文档，所以兼容性很差，平时不建议使用。

我们看案例，请使用最新 chrome 浏览器查看本案例。

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=;
		canvas.height=;
		const ctx = canvas.getContext('2d');
		
		
		ctx.fillStyle = "#456795"
		ctx.font="16px 微软雅黑"
		ctx.textAlign = "left"
		ctx.fillText("Wiki left", , )
		ctx.textAlign = "center"
		ctx.fillText("Wiki center", , )
		ctx.textAlign = "right"
		ctx.fillText("Wiki right", , )
		ctx.textAlign = "start"
		ctx.fillText("Wiki start", , )
		ctx.textAlign = "end"
		ctx.fillText("Wiki end", , )
		
	
		ctx.direction = "rtl";	 //设定画布的渲染方向
		
		ctx.fillStyle = "red"
		ctx.font="16px 微软雅黑"
		ctx.textAlign = "left"
		ctx.fillText("Wiki left", , )
		ctx.textAlign = "center"
		ctx.fillText("Wiki center", , )
		ctx.textAlign = "right"
		ctx.fillText("Wiki right", , )
		ctx.textAlign = "start"
		ctx.fillText("Wiki start", , )
		ctx.textAlign = "end"
		ctx.fillText("Wiki end", , )
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.Style="#ccc";
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.();
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.Style="#ccc";
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.();
	
	</script>
<body>
</html>

运行结果：

我们可以从运行结果中看出，当设定了画布的文本方向为 rtl 后，再绘制的红色，只有 start 和 end 的位置切换了，left、right、center都没有受到影响。

本小节我们学习了 textAlign 和 direction , 它们是 canvas 2D API 提供的设置文本对齐方式的。

textAlign 说明

特别说明：
该是针对 fillText 和 Text 的 X 的值，所以如果 textAlign = “center”，那么该文本将画在 X - 50% * width 的位置。

语法：

ctx.textAlign = value;

取值说明：

value可取如下值：

补充

direction 说明

语法：

ctx.direction = value;

取值说明：

value可取如下值：

本小节我们主要学习了利用 textAlign 设定文本对齐方式以及 start 和 end 在文本方向不同时的表现，下一节我们学习文本的垂直对齐。

←文本绘制

文本垂直对齐方式→

文本水平对齐方式

您的鼓励是对我最大的支持