HTML Canvas - 添加文本

我们已经了解了如何在 Canvas 元素中绘制图形以及对其进行样式设置。现在，我们将了解如何在 Canvas 元素中绘制文本。

绘制文本

要在 Canvas 元素上渲染文本，可以使用两种方法，如下表所示。

序号	方法及描述
1	fillText(text, x, y, maximum_width) 使用此方法时，给定的文本将插入到 Canvas 中的 (x, y) 位置并填充。我们可以不为最大宽度参数赋值（或）给定一个值以绘制具有给定宽度的文本。
2	strokeText (text, x, y, maximum_idth) 此方法在 Canvas 元素内的给定位置 (x, y) 绘制描边文本。我们也可以为文本提供宽度参数进行绘制，或者将其保留在默认大小。

序号

方法及描述

fillText(text, x, y, maximum_width)

使用此方法时，给定的文本将插入到 Canvas 中的 (x, y) 位置并填充。我们可以不为最大宽度参数赋值（或）给定一个值以绘制具有给定宽度的文本。

strokeText (text, x, y, maximum_idth)

此方法在 Canvas 元素内的给定位置 (x, y) 绘制描边文本。我们也可以为文本提供宽度参数进行绘制，或者将其保留在默认大小。

示例

让我们使用 font 属性通过文本绘制方法绘制文本以清楚地理解它。以下代码演示了如何使用可用方法在 Canvas 上绘制文本。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>drawing text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = '55px Verdana';
            context.fillText('This text is filled', 10, 50);
            context.strokeText('This text is stroked', 10, 100);
         }
      </script>
   </body>
</html>

输出

以下代码的输出为

文本样式

我们可以使用样式属性对 Canvas 上绘制的文本进行样式设置。我们在上面的示例中已经看到了 font 属性。可以使用四个属性来设置 Canvas 上文本的样式，每个属性都列在下面的表格中。

序号	属性及描述	可接受的值
1	font 使用此属性设置文本大小和字体样式。默认值为 10px 大小，字体样式为 sans-serif。文本大小以像素为单位，字体样式以字符串为单位。如果初始化时有任何错误，则忽略给定的 font 属性。	Canvas.font="text_size font_style";
2	textAlign 此属性可用于设置 Canvas 中文本的位置。文本的默认位置为“start”。它只更改水平对齐方式。	'start', 'end', 'left', 'right', 'center'.
3	textBaseline 此属性用于更改画布文本的基线对齐方式。默认值为“alphabetic”。它设置文本的垂直对齐方式。	'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'.
4	direction 它设置 Canvas 文本的方向性。默认值为“inherit”。	'ltr', 'rtl', 'inherit'.

示例 1

以下示例演示了 HTML5 Canvas 中文本的 font 和 textAlign 属性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.textAlign = "start";
            context.fillText(context.textAlign, 10, 75);
            context.textAlign = "end";
            context.fillText(context.textAlign, 500, 75);
            context.textAlign = "left";
            context.fillText(context.textAlign, 140, 75);
            context.textAlign = "right";
            context.fillText(context.textAlign, 390, 75);
            context.textAlign = "center";
            context.fillText(context.textAlign, 275, 75);
         }
      </script>
   </body>
</html>

输出

以下代码返回的输出为

示例 2

以下代码为所有可用值实现了textBaseline属性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="700" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.textBaseline = "top";
            context.strokeText(context.textBaseline, 0, 75);
            context.textBaseline = "hanging";
            context.strokeText(context.textBaseline, 80, 75);
            context.textBaseline = "middle";
            context.strokeText(context.textBaseline, 210, 75);
            context.textBaseline = "alphabetic";
            context.strokeText(context.textBaseline, 310, 75);
            context.textBaseline = "ideographic";
            context.strokeText(context.textBaseline, 450, 75);
            context.textBaseline = "bottom";
            context.strokeText(context.textBaseline, 610, 75);
         }
      </script>
   </body>
</html>

输出

以下代码的输出为

示例 3

我们将在以下示例中演示文本方向。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.fillText('direction-', 150, 50);
            context.direction = 'rtl';
            context.fillText('direction-', 150, 130);
         }
      </script>
   </body>
</html>

输出

以下代码的输出为

测量文本

此方法用于获取有关文本的更多详细信息。它允许我们测量文本。用于实现此目的的方法是 measureText('text_string') - 此方法返回一个文本对象，其中包含输入文本以像素为单位的宽度，当以给定的当前样式绘制时。

示例

以下代码演示了measureText()方法。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.strokeText("hello", 10, 50);
            var text = context.measureText('hello');
            window.alert(text.width);
         }
      </script>
   </body>
</html>

输出

代码返回的输出为

打印页面