如何使用 JavaScript 查找 HTML 画布中的文本高度？
概述
画布是一种 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"。在此，计算基线上方的高度加上基线下方线条字符的高度，并将其相加以获得总文本的高度。
结论
此功能有助于网页布局的 DOM 操作。这有助于创建动态过渡效果和动画。由于我们使用了 fillText() 方法，我们可以将三个参数作为文本传递，我们必须将其添加到画布中，第二个参数是画布水平方向的 x 坐标，其中传递了一个数值，第三个参数是垂直方向的 y 坐标并设置数值。
