前面的课程我们学习的都是如何在Canvas中绘制图形，但很多时候，除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能，例如文本的描边与填充，向Canvas之中放置文本，以及用像素为单位来计算任意字符串的宽度等。接下来的内容，我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。

Canvas的绘图环境对象提供了两种方法来渲染文本：

• fillText(text, x, y, [maxWidth])：绘制填充文本
• strokeText(text, x, y, [maxWidth])：绘制描边文本

在Canvas中同样提供了类似CSS的一些font属性，用来修饰在Canvas中绘制的文本，比如:

• font = value：用来修饰绘制文本的样式，类似于CSS中的font
• textAlign = value：文本对齐设置
• textBaseline = value： 文本基线对齐设置
• direction = value： 文本方向的设置

除此之外，很多时候我们还需要对已绘制文本宽度的度量，在Canvas中提供了一个measureText(text)方法，该方法所返回的对象中，包含一个名为width的属性，它的值代表你传递给该方法的文本所占据的宽度。

在接下来的内容，我们将详细的针对上述内容做相关的阐述。

文本的填充和描边

在Canvas中的CanvasRenderingContext2D对象提供了两个方法来绘制文本：fillText()和strokeText()方法。先来看fillText()方法。

fillText()方法用来绘制填充文本，其语法如下：

ctx.fillText(text, x, y, [maxWidth])

fillText()方法接受四个参数：

• text：需要绘制的文本内容
• x：指定绘制文本在Canvas画布中起始位置的x轴坐标点
• y：指定绘制文本在Canvas画布中起始位置的y轴坐标点
• maxWidth：指定绘制文本的最大宽度

来看个简单的示例：

var text = 'Hello! W3cplus.com !'; // 需要绘制的文本内容
ctx.fillStyle = '#f90'; // 文本颜色
ctx.textAlign = 'center'; // 文本对齐方式  
ctx.font = '48px Airal'; // 文本字号、字体

ctx.fillText(text, w / 2, h / 2);

效果如下：

可以点击这里在CodePen上查看Demo效果。

在绘制文本时，同样可以使用fillStyle属性来设置填充文本的颜色。另外，上面的示例，我们只用了其中三个参数，并没有使用maxWidth参数。在fillText()方法中，这个参数是可选参数。这个参数的主要功能是用来控制绘制文本的最大宽度。如果绘制的文本内容超过了maxWidth的宽度的时候，将会压缩文本，让绘制的文本宽度和maxWidth值一样。

来个小示例：

var text = 'Hello! W3cplus.com !';
ctx.fillStyle = '#f90';
ctx.textAlign = 'center';

ctx.font = '48px Airal';

ctx.fillText(text, w / 2, h / 2 - 50, 200);
ctx.fillText(text, w / 2, h / 2 + 50);

效果如下：

可以点击这里在CodePen上查看Demo效果。

上示中，绘制的第一个文本，设置了maxWidth，而第二个文本并未设置maxWidth。通过ctx.measureText(text).width)可以得出未设置maxWidth的值是474，也就是说文本Hello! W3cplus.com!从474压缩到了200。

上面介绍的是fillText()绘制填充文本，在Canvas中还可以通过strokeText()方法来绘制描边文本。该方法具有的参数和使用方法与fillText()一样，只是最终在Canvas中渲染的效果不一样。比如将上示中的fillText()换成strokeText()，同时将fillStyle换成strokeStyle：

var text = 'Hello! W3cplus.com !';
ctx.strokeStyle = '#f90';
ctx.textAlign = 'center';

ctx.font = '48px Airal';

ctx.strokeText(text, w / 2, h / 2 - 50, 200);
ctx.strokeText(text, w / 2, h / 2 + 50);

最终效果如下：

可以点击这里在CodePen上查看Demo效果。

在实际中，我们可以同时使用fillText()和strokeText()方法绘制一个具有填充的边框的文本，这也是我们最常见的描边文本，但它们的起始位置应该在同一个点：

var text = 'Hello! W3cplus.com !';
ctx.strokeStyle = 'blue'