canvas之文本

一、绘制文本

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

示例：

image.png

二、样式文本

有更多的属性可以让你改变canvas显示文本的方式：

font = value
    当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
    文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value
    基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
    文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

（1）font 字体样式

CanvasRenderingContext2D.font 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。
语法：ctx.font = value;

（2）textAlign文本的对齐方式

CanvasRenderingContext2D.textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。

语法：ctx.textAlign = "left" || "right" || "center" || "start" || "end";
注意：该对齐是基于CanvasRenderingContext2D.fillText方法的x的值。

这里的textAlign="center"比较特殊。textAlign的值为center时文本的居中是基于fillText所给x的值，就是说文本一半在x的左边，一半在x的右边。
想让文本在整个canvas居中，需要将fillText的x值设置成canvas的宽度的一半。

direction属性会对此属性产生影响。
如果direction属性设置为ltr，则left和start的效果相同，right和end的效果相同；
如果direction属性设置为rtl，则left和end的效果相同，right和start的效果相同。

有效值：

left
    文本左对齐。
right
    文本右对齐。
center
    文本居中对齐。
start
    文本对齐界线开始的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。
end
    文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。

（3）textBaseline 文本基线，决定文字垂直方向的对齐方式。

CanvasRenderingContext2D.textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。
语法：ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

有效值:

top
    文本基线在文本块的顶部。
hanging
    文本基线是悬挂基线。
middle
    文本基线在文本块的中间。
alphabetic
    文本基线是标准的字母基线。
ideographic
    文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
bottom
    文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

（4）direction 当前文本方向(此功能某些浏览器尚在开发中)

CanvasRenderingContext2D.direction 是Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。
语法：ctx.direction = "ltr" || "rtl" || "inherit";

有效值：

ltr
    文本方向从左向右。
rtl
    文本方向从右向左。
inherit
    根据情况继承 元素或者 Document 。

其它文章请访问：

• canvas入门
• canvas之渐变
• canvas之文本
• canvas之图像
• canvas之变形

参考：路径-CanvasAPI|MDN