章节索引 :

文本水平对齐方式

1. 前言

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

2. 水平对齐

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

我们看一个例子:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px 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", 150, 30)
		
		
		ctx.textAlign = "center" //设置绘制文本的给定点为文本中间
		ctx.fillText("慕课Wiki", 150, 80)
		
		
		ctx.textAlign = "right" //设置绘制文本的给定点为文本右侧
		ctx.fillText("慕课Wiki", 150, 130)
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(150,0);
		ctx.lineTo(150,150);
		ctx.stroke();
	
	</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果:

我们将上面例子的主要内容拆分讲解:

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

    ctx.font="20px 微软雅黑"
    
  2. 设定水平对齐方式为左对齐,即以我们给定的锚点 (150, 30) 为文本起点,left 值也是默认值。

    ctx.textAlign = "left"
    ctx.fillText("慕课Wiki", 150, 30)
    
  3. 设定水平对齐方式为居中对齐,即以我们给定的锚点 (150, 80) 为文本中点。

    ctx.textAlign = "center"
    ctx.fillText("慕课Wiki", 150, 80)
    
  4. 设定水平对齐方式为右对齐,即以我们给定的锚点 (150, 130) 为文本最右点。

    ctx.textAlign = "right"
    ctx.fillText("慕课Wiki", 150, 130)
    
  5. 绘制一条辅助参考线。

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

3.水平对齐进阶学习

上面我们列举了 textAlign 的三个值,leftcenterright,其实 textAlign 属性还有两个值:startend,这两个值在默认情况下和 leftright 的作用完全一样,即:start 等同于 leftend 等同于 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>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300;
		canvas.height=300;
		const ctx = canvas.getContext('2d');
		
		
		ctx.fillStyle = "#456795"
		ctx.font="16px 微软雅黑"
		ctx.textAlign = "left"
		ctx.fillText("慕课Wiki left", 150, 30)
		ctx.textAlign = "center"
		ctx.fillText("慕课Wiki center", 150, 60)
		ctx.textAlign = "right"
		ctx.fillText("慕课Wiki right", 150, 90)
		ctx.textAlign = "start"
		ctx.fillText("慕课Wiki start", 150, 120)
		ctx.textAlign = "end"
		ctx.fillText("慕课Wiki end", 150, 150)
		
	
		ctx.direction = "rtl";	 //设定画布的渲染方向
		
		ctx.fillStyle = "red"
		ctx.font="16px 微软雅黑"
		ctx.textAlign = "left"
		ctx.fillText("慕课Wiki left", 150, 180)
		ctx.textAlign = "center"
		ctx.fillText("慕课Wiki center", 150, 210)
		ctx.textAlign = "right"
		ctx.fillText("慕课Wiki right", 150, 240)
		ctx.textAlign = "start"
		ctx.fillText("慕课Wiki start", 150, 270)
		ctx.textAlign = "end"
		ctx.fillText("慕课Wiki end", 150, 300)
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(150,0);
		ctx.lineTo(150,300);
		ctx.stroke();
		
		//绘制中间参考线
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(0,150);
		ctx.lineTo(300,150);
		ctx.stroke();
	
	</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

运行结果:

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

4. 属性整理

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

4.1 对齐设置 textAlign

textAlign 说明

  • textAlign 是 canvas 2D API 提供的设置文本对齐方式的属性。
  • 默认值:start。

特别说明:
该属性是针对 fillTextstrokeText 方法的 X 的值,所以如果 textAlign = “center”,那么该文本将画在 X - 50% * width 的位置。

语法:

ctx.textAlign = value;

取值说明:

value可取如下值:

value 说明 特别说明
left 文本左对齐 对齐方式是针对 fillTextstrokeText 方法的 X 的值。
right 文本右对齐 对齐方式是针对 fillTextstrokeText 方法的 X 的值。
center 文本居中对齐 对齐方式是针对 fillTextstrokeText 方法的 X 的值。
start 文本对齐界线开始的地方,默认左对齐 搭配 direction 属性使用,ltr:从左向右,rtl:从右向左。
end 文本对齐界线结束的地方,默认右对齐 搭配 direction 属性使用,ltr:从左向右,rtl:从右向左。

补充

  1. 如果你想让文本在整个 canvas 居中,只需要将 fillText 的 X 值设置成 canvas 的宽度的一半,textAlign 值设置成 center。
  2. start 和 stop 默认情况下是等同于 left 和 right 的,如果设置 direction 的值为:rtl,则刚好相反。
  3. direction 属性还未被纳入标准文档,兼容性很差,所以针对 start 和 end 的使用参照 left 和 right。

4.2 文本方向 direction

direction 说明

  • direction 是 canvas 2D API 提供的设置文本方向的属性。
  • 默认值:ltr。

语法:

ctx.direction = value;

取值说明:

value可取如下值:

value 说明 特别说明
ltr 画布文本从左向右排布 默认值。
rtl 画布文本从右向左排布 兼容性较差。

5. 总结

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