如何使用 JavaScript 查找 HTML 画布中的文本高度?

htmljavascriptweb developmentfront end technology

概述

画布是一种 HTML 元素，可用于在网页上显示任何类型的自定义文本或图形。画布使图形可编辑，我们可以通过它制作自己的自定义文本或设计。

可以使用 <canvas> 标签将画布元素添加到 HTML 中，也可以使用 JavaScript 通过"document"对象"createElement"方法添加它。由于我们必须找到 HTML 画布中写入的文本的高度，我们可以使用"textMetrics"对象的 measureText() 属性来计算文本的高度。

语法

用于查找文本高度的语法如下所示，其中我们引用了画布 getContext() 属性。

var fM = ctx.measureText("A");
var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;

measureText() − 上述语法中的 measureText() 称为 textMetrics 对象的属性。在 measureText() 中，传递一个具有最大高度的字符作为参数，例如measureText("C")。
actualBoundingBoxAscent − 它是 measureText() 属性的方法，它返回垂直方向上文本基线上方文本的高度。通过此方法，我们可以获得基线上方字符的高度。
actualBoundingBoxDescent − 它是 measureText() 属性的方法，它返回垂直向下方向上文本基线下方文本的高度。通过此方法，我们可以获得基线下方字符的高度。

算法

步骤 1 - 在文本编辑器上创建一个 HTML 文件，并将 HTML 样板添加到该文件中。
步骤 2 - 现在使用 HTML <canvas> 标签创建一个画布，其 id 名称等于"textCanvas"。同时将高度和宽度属性添加到画布标签中。

<canvas id="textCanvas" width="300" height="150"></canvas>

步骤 3 − 现在将脚本标记添加到 body 标记。

<script></script>

步骤 4 − 现在访问 canvas 标记并将其存储在变量中。

let canva = document.getElementById("textCanvas");

步骤 5 − 使用 getContext() 将文本添加到 2d 画布。

let ctx = canva.getContext("2d");

步骤 6 − 现在将 fontSize 和 fontFamily 存储到变量中。

var f = "20px Arial";
ctx.font = f;

步骤 7 − 现在将任何文本存储到变量中。

var txt = "tutorialspoint.com";

步骤 8 − 创建 measureText() 对变量的引用。

var fM = ctx.measureText("A");

步骤 9 − 现在使用 actualBoundingBoxAscent 和 actualBoundingBoxDescent 方法并添加它们的返回值并将其存储在变量中。

var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;

第 10 步 - 使用 fillText() 方法将高度和文本添加到画布。

ctx.fillText("Text: " + txt, 5, 40)
ctx.fillText("Height: " + txtH, 5, 80)

示例

在此示例中，我们将使用 HTML 创建画布，并使用 JavaScript 将文本添加到画布。然后，我们将使用 textCentrics 属性来计算文本的高度。

<html>
<head>
   <title> find the height of text </title>
   <style>
      canvas {
         border: 2px solid black;
      }
   </style>
</head>
<body>
   <h3> Finding height of the text </h3>
   <canvas id="textCanvas" width="300" height="150"></canvas>
   <script>
      let canva = document.getElementById("textCanvas");
      let ctx = canva.getContext("2d");

      var f = "20px Arial";
      ctx.font = f;

      var txt = "tutorialspoint.com";
      var fM = ctx.measureText("A");

      var txtH = fM.actualBoundingBoxAscent + fM.actualBoundingBoxDescent;

      ctx.fillText("Text: " + txt, 5, 40)
      ctx.fillText("Height: " + txtH, 5, 80)
   </script>
</body>
</html>

下图显示了输入文本的高度。下图中，带有黑色边框的框是画布，其中包含文本"tutorialspoint.com"，高度为"15"。在此，计算基线上方的高度加上基线下方线条字符的高度，并将其相加以获得总文本的高度。