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;
}

たとえば、「こんにちは!」の幅を計算するには、 「太字 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 や textAlign などのテキスト プロパティをさらにカスタマイズできます。 textBaseline.

Notes

• DOM にテキストを追加するときは、パディング、マージン、境界線の効果を考慮してください。
• 一部のブラウザでは、Canvas メソッドサブピクセル精度 (浮動小数点結果) を提供しますが、他のものでは、以下の精度のみが得られます。 integers.
• Firefox では、Canvas メソッドは DOM ベースのメソッドよりも大幅に高速です。

パフォーマンスの比較

jsperf ベンチマークは、Canvas メソッドとキャッシュ DOM ベースのメソッドは同様のパフォーマンスを持っていますが、Firefox では Canvas メソッドの方が著しく高速です。

以上がCanvas メソッドを使用して JavaScript でテキストの幅を計算するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。