html5 Canvas 可以使用各种字体，大小和颜色在html5画布上绘制文本，文本的外观由这些2D Context font 属性 控制，要绘制文本，请使用fillText()或 stroke Text() 功能 。
在线示例
可以使用各种字体，大小和颜色在HTML5画布上绘制文本。
文本的外观由这些2D Context font 属性 控制。此外，您需要根据要绘制填充文本还是描边文本来设置fillStyle或 stroke Style2D Context 属性 。
要绘制文本，请使用fillText()或 stroke Text() 功能
这是 一个 简单的 代码 示例:
示例
<canvas?id="ex1"?width="500"?height="100"?style="border:?1px?solid?#cccccc;">
????HTML5?Canvas?not?supported
</canvas>
<script>
???var?canvas??=?document.getElementById("ex1");
???var?context?=?canvas.getContext("2d");
???context.font?=?"36px?Verdana";
???context.fillStyle?=?"#000000";
???context.fillText("HTML5?Canvas?Text",?50,?50);
???context.font????????=?" nor mal?36px?Arial";
???context. stroke Style?=?"#000000";
???context. stroke Text("HTML5?Canvas?Text",?90);
?</script>
这是在画布上绘制时的结果:
字体和样式
在HTML5画布上绘制文本时，必须设置要使用的字体。这是通过设置2D上下文font 属性 的值来完成的。此 属性 是具有css兼容值的字符串，其格式为:
[font?style][font?weight][font?size][font?face]
例如
context.font?=?" nor mal? nor mal?20px?Verdana";
您可以为字体字符串的每个部分设置以下值:
font style nor malitalic
oblique
inherit font weight nor mal
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.
请注意，并非每个浏览器都 支持 所有值。在依赖它们之前，您将必须测试计划使用的值。
这是另 一个 示例:
"italic?bold?36px?Arial"
绘图 文字
如前所述，在HTML5画布上绘制文本时，您可以绘制填充文本或轮廓文本。您可以使用2D上下文 函数 fillText()和进行操作 stroke Text()。这些 函数 的定义如下:
fillText???(textString,?x,?y?[,maxWidth]); stroke Text?(textString,maxWidth]);
该textString参数是绘制文本。
在x和y代表在 文字 中得出的位置。该x 参数是文本开始的地方。该y参数是文本垂直放置的位置，但是确切的表示方式取决于文本基线。文本基线将在后面的部分中介绍。
该maxWidth文本被覆盖在下面的部分。
这是 一个 代码 示例:
context.font??????=?"36px?Verdana";
context.fillStyle?=?"#000000";
context.fillText("HTML5?Canvas?Text",?50);
文字 最大宽度
可选maxWidth参数告诉画布，文本在水平方向上不能比给定参数值占用更多空间。如果 文字 太宽而无法容纳 maxWidth，则 文字 的宽度将被压缩。它没有被切断。这是 一个 使用和不使用绘制相同文本的 代码 示例maxWidth:
context.font??????=?"36px?Verdana";
context.fillStyle?=?"#000000";
context.fillText("HTML5?Canvas?Text",?50);
context.fillText("HTML5?Canvas?Text",?100,?200);
这是在HTML5画布上绘制时这两个文本的外观:
如您所见，第二个文本的宽度被压缩以适合maxWidth 200个像素.
文字 颜色
像其他任何形状一样，使用2D上下文 的fillStyle和 stroke Style 属性 设置填充或描边文本的颜色。 在这里 ，我不会更详细地介绍这些 属性 。
测量 文字 宽度
2D上下文对象具有可以测量文本像素宽度的 功能 。它无法测量高度。该 函数 称为measureText()。这是 一个 代码 示例:
var?textMetrics?=?context.measureText("measure?this");
var?width?=?textMetrics.width;
测量文本的宽度可用于计算文本字符串是否适合特定空间等。
文字 基线
文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此 属性 的方式上也可能会有细微的差异。 fillText() stroke Text()
使用textBaseline2D上下文的 属性 设置文本基线。以下是它可以采用的值及其含义:
这是 一个 示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。将画一条线y=75，向您 显示 如何围绕该y值设置文本基线。
下面是 生成 上述图形的 代码 :
context.stokeStyle?=?"#000000";
context. linewidth ??=?1;
context.beginPath();
context.mov eto (??0,?75);
context.lin eto (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?=?"b ott om";
context.fillText("b ott om-glyph",?400,?75);
文字 对齐
2D上下文textAlign 属性 定义了绘制时文本如何水平对齐。换句话说，该textAlign 属性 定义了x绘制文本时的坐标.
start 紧随该x位置之后绘制文本 left 紧随x位置之后才绘制文本，例如start。 center 文本的中心位于 一个 x位置。 end 文本的结尾位于x位置。 right 文本的右边缘位于x位置，例如end。以下是一些示例， 显示 了该textAlign 属性 的工作方式。垂直线在处绘制x = 250。所有文本也都绘制有x = 250，但是textAlign 属性 的值不同。
这是图形的 代码 示例：
<canvas?id="ex4"?width="500"?height="120"?style="border:?1px?solid?#cccccc;">
????HTML5?Canvas?not?supported
</canvas>
<script>
var?canvas??=?document.getElementById("ex4");
var?context?=?canvas.getContext("2d");
context.stokeStyle?=?"#000000";
context. linewidth ??=?1;
context.beginPath();
context.mov eto (?250,?0);
context.lin eto (?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",?40);
context.textAlign?=?"end";
context.fillText("end",?60);
context.textAlign?=?"left";
context.fillText("left",?80);
context.textAlign?=?"right";
context.fillText("right",?100);
</script>
代码 运行结果如下：??
HTML5 Canvas 绘制图像 ? ?HTML5 Canvas 阴影
查看更多关于HTML5 Canvas 绘制文本的详细内容...