資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用JavaScript計算文字寬度
要計算文字寬度，我們可以使用JavaScript中的`measureText()`方法。在canvas中，`measureText()`方法用於測量文字內容的寬度。這意味著我們可以將文字傳遞給此canvas方法，然後呼叫該方法來測量文字。它將返回一個包含關於已測量文字資訊的 物件。
有時，寬度可能是一個浮點值；因此，使用`Math.ceil()`方法對值進行四捨五入並返回一個整數。
語法
以下是用於計算文字寬度的 方法的語法：
const text = "Hello World!";
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
let text = ctx.measureText(text);
console.log(text.width);
計算文字寬度的步驟
步驟1 –宣告我們要計算其寬度的文字。 或者，我們可以使用innerHTML屬性在螢幕上顯示文字，以便使用者更好地理解。
步驟2 –使用`document.createElement()`方法建立一個canvas元素。
步驟3 –使用`canvas.getContext("2d")`獲取上面建立的canvas的上下文。
步驟4 –使用`context.measureText(text).width`屬性測量文字寬度。
步驟5 –使用`Math.ceil(width)`計算最終寬度。
步驟6 –最後顯示文字的最終寬度。
示例
計算文字寬度
在下面的示例中，我們計算文字的寬度。文字內容是“Hello World！”。您可以更改文字內容並檢視輸出中的差異。
<!DOCTYPE html>
<html>
<body>
<h2>Calculating width of the text using canvas</h2>
<p id="text" style="font-size : 20px"></p>
<p>Width of the text is:
<span class="output"></span>
</p>
<script>
const text = "Hello World!";
document.getElementById("text").innerHTML = text;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const width = context.measureText(text).width;
const finalWidth = Math.ceil(width) + "px";
document.querySelector('.output').textContent = finalWidth;
</script>
</body>
</html>
在上面，我們建立了一個canvas元素並將文字傳遞給`canvas.measureText()`方法，該方法返回一個物件。從中我們得到所選文字的寬度。`Math.ceil()`從浮點值返回四捨五入的值。返回值以畫素為單位。
示例
計算包含文字的HTML元素的寬度
我們使用`clientWidth`和`clientHeight`屬性來計算`
`元素的寬度。
<!DOCTYPE html>
<html>
<body>
<h1>Calculating width of the text</h1>
<p id='text' style = "font-size:30px">
Text to calculate : "Hello World!"
</p>
<p>Width of the text is:
<span class="output"></span>
</p>
<script>
const text = document.getElementById("text");
const height = text.clientHeight
const width = text.clientWidth
document.querySelector('.output').textContent = width + " px";
</script>
</body>
</html>
這裡，`clientWidth`屬性將給出文字的寬度。我們從id為“text”的p標籤中獲取文字。
在上面，我們看到了如何使用`clientWidth`和`canvas.measureText()`方法計算文字的寬度。希望本文能闡明如何計算文字的寬度。
8K+ 次瀏覽
