HTML Canvas - 添加文本

我们已经了解了如何在 Canvas 元素中绘制形状以及设置它们的样式。现在我们将了解如何在 Canvas 元素中绘制文本。

绘制文字

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

序列号 方法及说明
1

fillText（文本，x，y，最大宽度）

使用此方法时，给定的文本将插入到画布中的 (x, y) 位置并进行填充。我们可以保留最大宽度参数而不分配值（或）给出一个值来绘制具有给定宽度的文本。
2

笔画文本（文本，x，y，最大idth）

此方法在 Canvas 元素内的给定位置 (x, y) 绘制描边文本。我们还可以给出一个宽度参数来绘制文本或将其保留在考虑默认大小的位置。

例子

让我们利用字体属性通过文本绘制方法来绘制文本，以便清楚地理解它。以下代码演示了如何使用可用方法在画布上绘制文本。

<!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

字体

使用此属性设置文本大小和字体样式。默认值为 10px 大小，字体样式为 sans-serif。文本大小以像素为单位，字体样式以字符串为单位。如果初始化时出现任何错误，则忽略给定的字体属性。

Canvas.font=”text_size font_style”;
2

文本对齐

该属性可用于设置 Canvas 中文本的位置。文本的默认位置是“开始”。它仅更改水平对齐方式。

“开始”、“结束”、“左”、“右”、“中心”。
3

文本基线

此属性用于更改画布文本的基线对齐方式。默认值为“字母”。它设置文本的垂直对齐方式。

“顶部”、“悬挂”、“中间”、“字母”、“表意”、“底部”。
4

方向

它设置画布文本的方向性。默认值为“继承”。

“ltr”、“rtl”、“继承”。

实施例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>

输出

代码返回的输出是

测量文本