数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 JavaScript 查找 HTML canvas 中文本的高度？
概述
canvas 是一个 HTML 元素，允许我们在网页上显示任何类型的自定义文本或图形。canvas 使图形可编辑，我们可以创建自己的自定义文本或设计。
可以使用 `
语法
下面显示了用于查找文本高度的语法，其中我们参考了 canvas 的 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" width="300" height="150"></canvas>
步骤 3 − 现在将 script 标签添加到 body 标签。
<script></script>
步骤 4 − 现在访问 canvas 标签并将其存储在一个变量中。
let canva = document.getElementById("textCanvas");
步骤 5 − 使用 getContext() 将文本添加到 2d canvas。
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() 方法将高度和文本添加到 canvas。
ctx.fillText("Text: " + txt, 5, 40)
ctx.fillText("Height: " + txtH, 5, 80)
示例
在这个例子中，我们将使用 HTML 创建一个 canvas，并使用 JavaScript 将文本添加到 canvas。然后，我们将使用 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”的 canvas。这里计算了基线上方的高度加上基线下方的字符高度，并将它们相加以获得总文本的高度。
结论
此功能有助于网页布局的 DOM 操作。这有助于创建动态过渡效果和动画。正如我们使用 fillText() 方法一样，我们可以传递三个参数：要添加到 canvas 的文本，第二个参数是 canvas 水平方向上的 x 坐标（传递数值），第三个参数是垂直方向的 y 坐标（设置数值）。
2K+ 次浏览
