初识canvas（二）

上节文章中，给大家分享了canvas最基础的用法，包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪切等功能，本节将继续为大家分享canvas的基础用法，同时也是最后一节基础知识分享，之后的内容，我们将会进入到对webgl的分享中。

1. 文本绘制

首先我们要提到的是绘制文本，在canvas 的开发过程中，文本的内容是肯定会存在的。本小节就来给大家分享下如何渲染文本。

1.1 绘制空心和实心文本

canvas中提供了两种绘制文本的方法，分别是绘制实心文本和空心文本，它们的方法分别是：

• strokeText(text, x, y, maxWidth): 绘制空心文本
• fillText(text, x, y, maxWidth): 绘制实心文本

参数介绍：

• text: 要绘制的文本内容
• x, y: 坐标点，文本左上角的坐标点
• maxWidth: 允许渲染的最大像素宽度

栗子：

// 绘制实心文本
c.fillText('hello world', 100, 100); // 将 hello world 这个内容从 100 100 这个点开始渲染。

// 绘制空心文本
c.strokeText('hello world', 200, 200); 

如果这里你的字体是默认大小，可能会看不到空心效果。改变字体大小在下文中有分享到。

1.2 改变文本样式

如果我们想修改字体的颜色，可以根据 绘制图形 一节中的方法，使用 strokeStyle、fillStyle 来修改。

1. 要设置实心文本字体为蓝色

c.fillStyle = 'blue';
c.fillText('hello world', 100, 100);

2. 要设置空心字体为红色

c.strokeStyle = 'yellow';
c.strokeText('hello world', 200, 200);

1.3 改变文本大小和字体样式

修改字体大小和字体样式需要用到 font = '字体大小 字体样式’ 属性。

如：把字体改为 宋体 40px。

c.font = '40px 宋体';

如果是特殊的字体，会出现不支持的现象。

1.4 修改文本对齐方式

文本对齐方式分为 垂直 和 水平 对齐方式。

1. 垂直方向对齐。

这里需要用到 textBaseLine 这个属性。意为按照基线对齐。它有6个值，分别是：

• alphabetic： 默认值，意为普通的字母基线。可理解为四线三格的第三条线。
• top：文字头部对齐基线
• hanging：悬挂基线，与top稍有不同
• middle：文字中部对齐
• ideographic：表意基线。稍难理解，可看示意图
• bottom：文字底部对齐基线

示例：

// 首先我们画一条基准线，让文字按照这条线对齐
c.strokeStyle = 'blue';
c.moveTo(5, 100);
c.lineTo(700, 100);
c.stroke();

c.font = '20px 宋体';

// 枚举可用的对齐方式。
c.textBaseline = 'top';
c.fillText('Top', 5, 100);
c.textBaseline = 'bottom';
c.fillText('Bottom', 100, 100);
c.textBaseline = 'middle';
c.fillText('Middle', 200, 100);
c.textBaseline = 'alphabetic';
c.fillText('Alphabetic',