您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

HTML5 Canvas 绘制文本

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

在线示例

可以使用各种字体,大小和颜色在HTML5画布上绘制文本。
文本的外观由这些2D Context font控制。此外,您需要根据要绘制填充文本还是描边文本来设置fillStyle或Style2D Context。
要绘制文本,请使用fillText()或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        = "normal 36px Arial";
   context.Style = "#000000";
   context.Text("HTML5 Canvas Text", 90);
 </script>

这是在画布上绘制时的结果:

字体和样式

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

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

例如

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

您可以为字体字符串的每个部分设置以下值:

请注意,并非每个浏览器都所有值。在依赖它们之前,您将必须测试计划使用的值。
这是另示例:

"italic bold 36px Arial"

绘图

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

fillText   (textString, x, y [,maxWidth]);
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和 Style设置填充或描边文本的颜色。,我不会更详细地介绍这些。

测量宽度

2D上下文对象具有可以测量文本像素宽度的。它无法测量高度。该称为measureText()。这是示例:

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

var width = textMetrics.width;

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

基线

文本基线确定如何解释和 的y参数。换句话说,垂直放置文本的位置以及该位置的解释方式。请注意,浏览器在解释此的方式上也可能会有细微的差异。 fillText()Text()
使用textBaseline2D上下文的设置文本基线。以下是它可以采用的值及其含义:

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

下面是上述图形的:

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo(  0, 75);
context.lineTo(500, 75);
context.();
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绘制文本时的坐标.

以下是一些示例,了该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.();
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>

运行结果如下:  


联系我
置顶