4.6 绘制文本
使用fillText()和strokeText()方法，可以分别以填充方式和轮廓方式绘制文本。
4.6.1 填充文字
视频讲解
fillText()方法能够在画布上绘制填色文本，默认颜色是黑色。其用法如下。
context.fillText(text,x,y,maxWidth);
参数说明如下：
text：规定在画布上输出的文本。
x：开始绘制文本的x坐标位置（相对于画布）。
y：开始绘制文本的y坐标位置（相对于画布）。
maxWidth：可选。允许的最大文本宽度，以像素计。
【示例】下面使用fillText()方法在画布上绘制文本“Hi”和“Canvas API”，效果如图4.42所示。
图4.42 绘制填充文字
4.6.2 轮廓文字
视频讲解
使用strokeText()方法可以在画布上绘制描边文本，默认颜色是黑色。其用法如下。
context.strokeText(text,x,y,maxWidth);
参数说明如下：
text：规定在画布上输出的文本。
x：开始绘制文本的x坐标位置（相对于画布）。
y：开始绘制文本的y坐标位置（相对于画布）。
maxWidth：可选。允许的最大文本宽度，以像素计。
【示例】下面使用strokeText()方法绘制文本“Hi”和“Canvas API”，效果如图4.43所示。
图4.43 绘制轮廓文字
4.6.3 文本样式
视频讲解
下面简单介绍文本样式的相关属性。
font：定义字体样式，语法与CSS字体样式相同。默认字体样式为10px sans-serif。
textAlign：设置正在绘制的文本水平对齐方式。取值说明如下：
start：默认，文本在指定的位置开始。
end：文本在指定的位置结束。
center：文本的中心被放置在指定的位置。
left：文本左对齐。
right：文本右对齐。
textBaseline：设置正在绘制的文本基线对齐方式，即文本垂直对齐方式。取值说明如下：
alphabetic：默认值，文本基线是普通的字母基线。
top：文本基线是em方框的顶端。
hanging：文本基线是悬挂基线。
middle：文本基线是em方框的正中。
ideographic：文本基线是表意基线。
bottom：文本基线是em方框的底端。
提示：大部分浏览器尚不支持hanging和ideographic属性值。
direction：设置文本方向。取值说明如下：
ltr：从左到右。
rtl：从右到左。
inherit，默认值，继承文本方向。
【示例1】下面示例在x轴150px的位置创建一条竖线。位置150就被定义为所有文本的锚点。然后比较每种textAlign属性值对齐效果，如图4.44所示。
【示例2】下面示例在y轴100px的位置创建一条水平线。位置100就被定义为用蓝色填充的矩形。然后比较每种textBaseline属性值对齐效果，如图4.45所示。
图4.44 比较每种textAlign属性值对齐效果
图4.45 比较每种textBaseline属性值对齐效果
4.6.4 测量宽度
视频讲解
使用measureText()方法可以测量当前所绘制文字中指定文字的宽度，它返回一个TextMetrics对象，使用该对象的width属性可以得到指定文字参数后所绘制文字的总宽度，其用法如下。
metrics=context. measureText(text);
其中的参数text为要绘制的文字。
提示：如果需要在文本向画布输出之前就了解文本的宽度，应该使用该方法。
【示例】下面是测量文字宽度的一个示例，预览效果如图4.46所示。
图4.46 测量文字宽度