資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
