如何使用 Canvas 方法計算 JavaScript 中的文字寬度？

如何使用 JavaScript 計算文字寬度

使用 JavaScript 計算字串的寬度並不直接簡單，尤其是在使用非等寬字體時。在這裡，我們探索使用 HTML 5 中的 Canvas.measureText 方法的解決方案。

用於文字寬度計算的 HTML 5 Canvas 方法

要使用 Canvas.measureText，我們建立一個畫布上下文並分配它所需的字體樣式。然後，我們使用measureText方法來測量指定文字的寬度。

function getTextWidth(text, font) {
  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  const context = canvas.getContext("2d");
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}

例如，計算「hello There!」的寬度。在「bold 12pt arial」字體中，我們可以這樣做：

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

使用CSS 字體樣式

如果我們想使用特定元素的字體大小，我們可以使用getCanvasFont實用函數：

const fontSize = getTextWidth(text, getCanvasFont(myEl));

Canvas 的優點方法

與基於DOM的方法相比，Canvas 方法有幾個優點：

• 簡潔和安全：它不會改變全局狀態或 DOM。
• 自訂：它允許進一步自訂文字屬性，例如 textAlign 和textBaseline。

註解

• 在 DOM 中加入文字時，請考慮內邊距、邊距和邊框效果。
• 在某些瀏覽器上，Canvas 方法提供亞像素精度（浮點結果），而在其他情況下，它僅精確到整數。
• 在Firefox，Canvas 方法明顯比基於 DOM 的方法快。

效能比較

jsperf 基準測試顯示 Canvas 方法和基於 DOM 的快取方法具有相似的效能，除了在 Firefox 中，Canvas 方法的速度明顯更快。

以上是如何使用 Canvas 方法計算 JavaScript 中的文字寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！