使用的时候，像下面这样调用即可：

drawText(ctx, 'W3cplus.com', w / 2, 40, true, false, 'blue'); drawText(ctx, 'W3cplus.com', w / 2, 80, true, true, 'blue', 100); 设置文本样式

在上面的示例中，我们看到了代码中有 ctx.font 属性的使用。其实在Canvas中，可以通过绘图环境对象的 font 属性，来设置绘制在Canvas之中的文本所采用的字型。该属性是一个CSS3格式的字型字符串，它和 CSS font 属性相同的语法，默认的字型是 10px sans-serif 。

Canvas中 font 属性的各个分量如下表所示：

字型属性分量 描述

font-style 可以取如下三个值： normal 、 italic 和 oblique

font-variant 可以取这两个值： normal 和 small-caps

font-weight 决定该字型的字符笔画粗细，可取如下值： normal 、 lighter 、 bold 和 bolder ，也可以采用对应的数值，比如 normal 对应的是 400

font-size 字型的大小，可以使用关键词 xx-small 、 x-small 、 small 、 medium 、 large 、 x-large 、 xx-large 、 smaller 、 larger ；也可以使用具体的带有长度单位的数值，比如 20px

line-height 浏览器会将该属性强制设置为其默认值 normal ，如果你设置了该值，浏览器会忽略你所设定的值

font-family 设置字体

通过CSS3与Canvas来指定字型属性时的区别：绘制环境对象的 font 属性也支持CSS3格式的字型语法，除了样式语法所特有的属性，例如 inherit 或 initial 等。如果你不巧刚好用到了 inherit 或 initial 的话，那么浏览器在执行到那行代码时会悄然地失败，并不抛出任何异常，同时也不会将该值设定给 font 属性。通过Canvas来设置字型属性与通过CSS3来设置相比，还有一个区别：在Canvas中设置 line-height 属性时，浏览器将忽略其值，因为规范要求浏览器必须将该值设置为 normal 。

文本定位（对齐方式）

这里所说的文本定位，其实指的是对齐方式，在CSS中我们可以使用 text-align 设置文本水平对齐方式， vertical-align 设置文本垂直方向的对齐方式。在Canvas中也有对应的属性。

通过前面的知识我们得知，在Canvas中使用 fillText() 或 fillText() 绘制文本时，需要指定所绘文本的 x 与 y 坐标，然而，浏览器具体会将文本绘制在何处（文本定位），则要看 textAlign 与 textBaseline 这两个绘图环境对象的属性。

textAlign

CanvasRenderingContext2D.textAlign 是Canvas中绘制文本时文本的对齐方式的属性。其对齐是基于 fillText() 或 strokeText() 方法的 x 值。 textAlign 属性有点类似于CSS中的 text-align ，用来设置文本水平对齐方式。其主要包括：

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

left ：文本左对齐

right ：文本右对齐

center ：文本居中对齐

start ：文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）

end ：文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）

默认值是 start 。在Canvas中使用 textAlign 时同样会受 direction 属性值的影响。当Canvas的 direction 的值为 ltr 时，也就是说浏览器是按照由左至右的方向来显示文本时， textAlign 的 left 的效果与 start 相同，而 right 的效果则与 end 相同。同理，如果 direction 的值为 rtl 时，也就是说浏览器是从右至左来显示文本的，那么 textAlign 的 right 的效果则与 start 一致，而 left 则与 end 一致。下例演示了 textAlign 每个值在浏览器中渲染的效果（其中 direction 的值为默认值 ltr ）：

var text = ['left', 'right', 'center', 'start', 'end']; ctx.fillStyle = '#f36'; ctx.font = '32px Airal'; for (var i = 0; i < text.length; i++) { ctx.textAlign = text[i]; ctx.fillText('textAlign:' + text[i], w / 2, (i + 1) * 50); }

效果如下：

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

示例中绘制的文本，其起始点是画布的中心位置 w / 2 ，也就是上图中的黑色竖线。 left 则让文本左侧在 x 点处（在竖线右侧）， right 则文本右侧在 x 点处（在竖线左侧）， center 则文本中间点在 x 点处（在竖线中间）。 start 和 left 等同， end 和 right 等同。

这里的 textAlign='center' 比较特殊。 textAlign 的值为 center 时候文本的居中是基于你在 fillText 的时候所给的 x 的值，也就是说文本一半在 x 的左边，一半在 x 的右边（上图展示看得更清楚些）。所以，如果你想让文本在整个Canvas居中，就需要将 fillText 的 x 值设置成 canvas 的宽度的一半。

textBaseline

CanvasRenderingContext2D.textBaseline 是Canvas中描述绘制文本时，当前文本基线的属性，类似CSS中的 vertical-align 属性，在介绍 textBaseline 属性之前，先来下图，下图展示了 textBaseline 属性支持的 不同的基线情况 ：

上图是不是非常熟悉呀，那我们回到Canvas的 textBaseline 属性的使用：

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

top ：文本基线在文本块的顶部

hanging ：文本基线是悬挂基线

middle ：文本基线在文本块的中间

alphabetic ：文本基线是标准的字母基线

ideographic ：文字基线是表意字基线，如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部

bottom ：文本基线在文本块的底部，与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母