HTML5 Canvas 可以使用各种字体,大小和颜色在HTML5画布上绘制文本,文本的外观由这些2D Context font属性控制,要绘制文本,请使用fillText()或strokeText()功能。
可以使用各种字体,大小和颜色在HTML5画布上绘制文本。
文本的外观由这些2D Context font属性控制。此外,您需要根据要绘制填充文本还是描边文本来设置fillStyle或strokeStyle2D Context属性。
要绘制文本,请使用fillText()或strokeText()功能
这是一个简单的代码示例:
<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 = "normal 36px Arial"; context.strokeStyle = "#000000"; context.strokeText("HTML5 Canvas Text", 50, 90); </script>测试看看 ‹/›
这是在画布上绘制时的结果:
在HTML5画布上绘制文本时,必须设置要使用的字体。这是通过设置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 | 以像素为单位的大小,例如12px,20px等 |
font face | 字体, e.g. verdana , arial , serif , sans-serif , cursive , fantasy , monospace etc. |
请注意,并非每个浏览器都支持所有值。在依赖它们之前,您将必须测试计划使用的值。
这是另一个示例:
"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);
这是在HTML5画布上绘制时这两个文本的外观:
如您所见,第二个文本的宽度被压缩以适合maxWidth 200个像素.
像其他任何形状一样,使用2D上下文 的fillStyle和 strokeStyle属性设置填充或描边文本的颜色。在这里,我不会更详细地介绍这些属性。有关 更多详细信息,请参见描边和填充。
2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例:
var textMetrics = context.measureText("measure this"); var width = textMetrics.width;
测量文本的宽度可用于计算文本字符串是否适合特定空间等。
文本基线确定如何解释和 的y参数。换句话说,垂直放置文本的位置以及该位置的解释方式。请注意,浏览器在解释此属性的方式上也可能会有细微的差异。 fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义:
top | 文本根据文本中最高字形的顶部对齐 |
hanging | 文本根据似乎悬挂的行对齐。这几乎与top相同,并且在许多情况下您看不到差异。 |
middle | 文本根据文本的中间对齐。 |
alphabetic | 垂直定向字形的底部,例如拉丁字母等西方字母 |
ideographic | 水平定向字形的底部。 |
bottom | 文本是根据文本中字形的底部对齐的,该字形在文本中向下延伸最低。 |
这是一个示例,该示例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上下文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.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); </script>测试看看 ‹/›
代码运行结果如下: