绘制文本 API

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

参数

1. text：使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
   1. font： CSS font 规范相同的字符串值。如：ctx.font = “bold 48px serif”;
   2. textAlign：描述绘制文本时，文本的对齐方式的属性。如：ctx.textAlign = “left” || “right” || “center” || “start” || “end”;
   3. textBaseline ：当前文本基线的属性。如：”top” || “hanging” || “middle” || “alphabetic” || “ideographic” || “bottom”;
   4. direction：描述当前文本方向的属性。如：ctx.direction = “ltr” || “rtl” || “inherit”;
2. x：文本起点的 x 轴坐标。
3. y：文本起点的 y 轴坐标。
4. maxWidth：绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

示例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

strokeText(text, x, y [, maxWidth])

参数

1. text：使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
   1. font： CSS font 规范相同的字符串值。如：ctx.font = “bold 48px serif”;
   2. textAlign：描述绘制文本时，文本的对齐方式的属性。如：ctx.textAlign = “left” || “right” || “center” || “start” || “end”;
   3. textBaseline ：当前文本基线的属性。如：”top” || “hanging” || “middle” || “alphabetic” || “ideographic” || “bottom”;
   4. direction：描述当前文本方向的属性。如：ctx.direction = “ltr” || “rtl” || “inherit”;
2. x：文本起点的 x 轴坐标。
3. y：文本起点的 y 轴坐标。
4. maxWidth：绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

示例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);

注：

1. 颜色同canvas图形颜色，fillStyle，strokeStyle