我们可以在HTML5 在canvas上绘制文字，并且可以设置文字的字体、大小和颜色。
2D上下文绘制文字的字体font属性控制。如果您需要使用颜色来填充文本或制作描述文本，您可以使用2D上下文fillStyle和strokeStyle完成属性。
要在canvas上绘制文本，可以使用2D上下文fillText()函数或strokeText()函数完成。以下是一个简单的例子：
var canvas = document.getElementById(ex1);
var context = canvas.getContext("2d");
context.font = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText(HTML5 Canvas Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText(HTML5 Canvas Text", 50, 90);
下图为上述代码的返回结果：
您的浏览器不支持HTML5 Canvas！
字体和样式
HTML5 在canvas上绘制文本时，我们可以设置文本的字体和样式。我们可以使用一组2D上下文font完成这些工作的属性。这些属性与CSS中设置字体的属性相兼容：
[font style][font weight][font size][font face]
例如，我们可以这样设置字体：
context.font = "normal normal 20px Verdana";
对于上述属性，我们可以有以下可取值：
-
font style可取值有： -
normal -
italic -
oblique -
inherit -
font weight可取值有： -
normal -
bold -
bolder -
lighter -
auto -
inherit -
100 -
200 -
300 -
400 -
500 -
600 -
700 -
800 -
900 -
font size：单位像素的字体尺寸。 -
ont face：例如：字体。verdana, arial, serif, sans-serif, cursive, fantasy, monospace等等
需要注意的是，并非所有浏览器都支持所有这些属性，您需要根据实际情况进行一些测试。
绘制文字
HTML5 当在canvas中绘制文本时，您可以绘制填充文本或描述文本。它们分别通过2D上下文fillText()和strokeText()实现函数。这两个函数的定义如下：
fillText (textString, x, y [,maxWidth]); strokeText (textString, x, y [,maxWidth]);
textString是要画的文字。
x和y在canvas上表示文字的位置。x参数是文本的X轴坐标，yY轴是文字的坐标，但如何在Y轴上定位取决于文本的基线。后面将介绍文本的基线。
maxWidth表示文本在水平方向上的最大宽度。然后向下看详细信息。
以下是示例代码：
context.font = "36px Verdana"; context.fillStyle = "#000000"; context.fillText(HTML5 Canvas Text", 50, 50);
文本的最大宽度
可选参数maxWidth表示在canvas上绘制文本时，文本水平方向的最大宽度不得大于参数指定的值。如果文本的宽度大于maxWidth如果指定值，文本的宽度将被压缩。请注意，它不会被切断。以下是在canvas中绘制两串相同文本的例子，但使用不同的文本maxWidth属性：
context.font = "36px Verdana"; context.fillStyle = "#000000"; context.fillText(HTML5 Canvas Text", 50, 50); context.fillText(HTML5 Canvas Text", 50, 100, 200);
上述代码的返回结果如下：请注意，第二串文本被压缩成200像素的总宽度：
您的浏览器不支持HTML5 Canvas！
文字的颜色
通过2D上下文填充或描述文本的颜色fillStyle和strokeStyle属性完成。实现方法与图形相同。可参考HTML5 Canvas：这里不再重复绘制矩形中的介绍。
测量文本的宽度
在2D上下文中，有一个函数可以用来测量文本的宽度，并返回以像素为单位的结果值。这个函数不能测量高度。这个函数是measureText()。以下是示例代码：
var textMetrics = context.measureText("measure this");
var width = textMetrics.width;
通过测量文本的宽度，我们可以知道当前的文本是否可以放置在当前的canvas容器或其他用途中。
文本的基线
决定如何解释文本的基线fillText()和strokeText()函数中的y参数。一般来说，文本是如何在垂直方向上定位的。请注意，这些解释可能在不同的浏览器中略有不同。
可通过2D上下文使用textBaseline设置文本基线的属性。
文本基线的语法是：
ctx.textBaseline= "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
下表列出了文本基线的可取值及其描述。
| 取值 | 描述 |
| top | 文本以文本中最高的字符为基线对齐 |
| hanging | 文本的基线是悬停线（hanging baseline）。它和top值基本相同。在大多数情况下，你可能看不到任何区别 |
| middle | 文本的基线是文本的中心线 |
| alphabetic | 文本的基线是正常的文本基线 |
| ideographic | 文本的基线是字形底部的水平方向 |
| bottom | 文本以文本中最低的字符为基线对齐 |
看完上面的描述，大家都会感到困惑。现在举个例子。我们使用相同的方法y值(75)绘制一串文本，但为每个文本设置不同的基线值。我们在图片中画一个y=75执行表示所有文本的基线。
您的浏览器不支持HTML5 Canvas！
上图的实现代码如下：
context.stokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo( 0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0, 75);
context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);
context.textBaseline = "middle";
context.fillText("middle", 120, 75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);
context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);
文本对齐
2D上下文的textAlignment属性用于定义如何在水平方向上对齐文本。换句话说，textAlignment属性定义绘制文本时文本的文本x坐标属性。
textAlignment属性语法为：
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
列出了下表textAlignment每个属性的取值及其描述。
| 取值 | 描述 |
| start | 从x左侧绘制文本 |
| left | 文本从x左侧绘制，和start属性相同 |
| center | x坐标位于文本的中心 |
| end | x坐标位于文本的末尾 |
| right | x坐标位于文本的末尾，和end属性相同 |
在下面的例子中显示textAlignment各种属性值的定位。垂直线的x坐标是x=250，所有字的x属性值也是250，但是它们textAlignment属性值不同。
您的浏览器不支持HTML5 Canvas！
上图的实现代码如下：
context.stokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo( 250, 0);
context.lineTo( 250, 250);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center", 250, 20);
context.textAlign = "start";
context.fillText("start", 250, 40);
context.textAlign = "end";
context.fillText("end", 250, 60);
context.textAlign = "left";
context.fillText("left", 250, 80);
context.textAlign = "right";
context.fillText("right", 250, 100);
返回HTML5 Canvas教程目录
相关阅读
-
MDN Drawing text
