可以使用各种字体，大小和颜色在HTML5画布上绘制文本。

文本的外观由这些2D Contextfont属性控制。另外，我们将需要设置" fillStyle"或者" strokeStyle" 2D Context属性，具体取决于我们要绘制填充文本还是描边文本。

要绘制文本，可以使用fillText()或者strokeText()函数。 fillText()

这是一个简单的代码示例：

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画布上绘制文本时，必须设置要使用的字体。这是通过设置2D Contextfont属性的值来完成的。此属性是具有CSS兼容值的字符串，其格式为：

[font style][font weight][font size][font face]

例如：

context.font = "normal normal 20px Verdana";

这是我们可以为字体字符串的每个部分设置的值：

请注意，并非每个浏览器都支持所有值。我们必须先测试计划使用的值，然后再依赖它们。

这是另一个示例：

"italic bold 36px Arial"

绘图文字

如前所述，在HTML5画布上绘制文本时，我们可以绘制填充文本或者轮廓文本。我们可以使用2D上下文函数fillText()和strokeText()来实现。这些函数的定义如下：

fillText   (textString, x, y [,maxWidth]);
strokeText (textString, x, y [,maxWidth]);

参数textString是要绘制的文本。

x和y代表绘制文本的位置。参数x是文本的开始位置。 y参数是文本垂直放置的位置，但是确切的表示方式取决于文本基线。文本基线将在后面的部分中介绍。

以下部分介绍了" maxWidth"文本。

这是一个代码示例：

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

文字最大宽度

可选的maxWidth参数告诉画布，文本在水平方向上不能比给定的参数值占用更多空间。如果文本太宽而无法容纳" maxWidth"，则将文本压缩为宽度。它没有被切断。这是一个代码示例，该示例在带有和不带有maxWidth的情况下绘制相同的文本：

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.fillText("HTML5 Canvas Text", 50, 100, 200);

第二个文本的宽度被压缩以适合200像素的" maxWidth"。

文字颜色

填充或者描边文本的颜色可以使用2D上下文的fillName和strokeStyle属性来设置，就像其他形状一样。在这里，我不会更详细地介绍这些属性。有关更多详细信息，请参见描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为" measureText()"。这是一个代码示例：

var textMetrics = context.measureText("measure this");

var width = textMetrics.width;

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释fillText()和strokeText()的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。

文本基线是使用2D上下文的textBaseline属性设置的。以下是它可以采用的值及其含义：

这是一个示例，该示例对所有文本使用相同的" y"值(75)绘制文本，但对每个绘制的文本使用不同的基线。将在" y = 75"处画一条线，以向我们展示如何围绕该" y"值设置文本基线。

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 Context的textAlign属性定义了绘制文本时如何水平对齐。换句话说，textAlign属性定义了绘制文本时x的坐标。

以下是一些示例，这些示例显示了textAlign属性的工作方式。垂直线在x = 250处绘制。所有文本也都以" x = 250"绘制，但是" textAlign"属性的值不同。

示例：

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);