一、绘制文本
使用 canvas 绘制文本，重要的属性和方法如下：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
示例：
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
//实心文本
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
//空心文本
ctx.font = "48px serif";
ctx.strokeText("Hello world", 20, 120);
}
draw();
</script>
二、样式文本
有更多的属性可以让你改变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
根据情况继承 <canvas> 元素或者 Document 。
其它文章请访问：
