HTML5 Canvas 绘制文本

HTML5 Canvas 可以使用各种字体，大小和颜色在HTML5画布上绘制文本，文本的外观由这些2D Context font属性控制，要绘制文本，请使用fillText()或strokeText()功能。

字体和样式

在HTML5画布上绘制文本时，必须设置要使用的字体。这是通过设置2D上下文font属性的值来完成的。此属性是具有CSS兼容值的字符串，其格式为:

css 复制代码

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

例如

ini 复制代码

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	以像素为单位的大小，例如12px，20px等
font face	字体, e.g. `verdana`, `arial`, `serif`, `sans-serif`, `cursive`, `fantasy`, `monospace` etc.

请注意，并非每个浏览器都支持所有值。在依赖它们之前，您将必须测试计划使用的值。

绘图文字

如前所述，在HTML5画布上绘制文本时，您可以绘制填充文本或轮廓文本。您可以使用2D上下文函数fillText()和进行操作strokeText()。这些函数的定义如下:

ini 复制代码

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

该textString参数是绘制文本。

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

该maxWidth文本被覆盖在下面的部分。

这是一个代码示例:

ini 复制代码

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

文字最大宽度

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

ini 复制代码

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

文字颜色

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

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。

文字基线

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

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

`top`	文本根据文本中最高字形的顶部对齐
`hanging`	文本根据似乎悬挂的行对齐。这几乎与top相同，并且在许多情况下您看不到差异。
`middle`	文本根据文本的中间对齐。
`alphabetic`	垂直定向字形的底部，例如拉丁字母等西方字母
`ideographic`	水平定向字形的底部。
`bottom`	文本是根据文本中字形的底部对齐的，该字形在文本中向下延伸最低。

这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。将画一条线y=75，向您显示如何围绕该y值设置文本基线。

文字对齐

2D上下文textAlign属性定义了绘制时文本如何水平对齐。换句话说，该textAlign属性定义了x绘制文本时的坐标.

`start`	紧随该x位置之后绘制文本
`left`	紧随x位置之后才绘制文本，例如start。
`center`	文本的中心位于一个x位置。
`end`	文本的结尾位于x位置。
`right`	文本的右边缘位于x位置，例如end。

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

引用

菜鸟教程