JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストの幅を計算する方法｜CanvasのmeasureText()を解説

JavaScriptでテキストの幅（横幅）を計測したい場合は、Canvas API の measureText() メソッドを使うのが最も簡単で確実な方法です。このメソッドは、指定したフォントスタイルで描画した場合のテキストの幅をピクセル単位で返してくれます。

measureText() メソッドとは？

measureText() は、Canvas 2D コンテキストに用意されているメソッドで、引数に渡した文字列が現在設定されているフォントでレンダリングされたときの幅を TextMetrics オブジェクトとして返します。戻り値の width プロパティを参照することで、実際の表示幅を数値として取得できます。

サンプルコード

以下のコードを実行すると、指定したテキストの幅を取得して画面に表示できます。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <script>
         function displayTextWidth(text, font) {
            var myCanvas = displayTextWidth.canvas || (displayTextWidth.canvas = document.createElement("canvas"));
            var context = myCanvas.getContext("2d");
            context.font = font;

            var metrics = context.measureText(text);
            return metrics.width;
         };
         document.write("Text Width: "+displayTextWidth("This is demo text!", "italic 18pt verdana")); //
      </script>
   </body>
</html>

コードのポイント

  • キャンバスの再利用： 関数のプロパティに canvas 要素をキャッシュすることで、呼び出しごとに新しい要素を作成する無駄を防いでいます。
  • フォントの指定： context.font に「italic 18pt verdana」のようにフォント情報を設定すると、そのスタイルでの描画幅が計測されます。
  • 幅の取得： metrics.width に、テキストの幅がピクセル値（浮動小数点数）で格納されています。

この手法は、文字数に応じて要素のサイズを自動調整したい場合や、テキストが領域からあふれないかを事前にチェックしたい場合などに非常に便利です。DOM に canvas を追加する必要もなく、オフスクリーン状態のまま計測だけを行えるのもメリットです。

  1. JavaScriptでテキストボックスを選択することは可能ですか？select()メソッドの使い方を解説

    はい、可能です。JavaScriptのselect()メソッドを使えば、テキストボックス内のテキストを選択状態にすることができます。まずは、テキスト入力欄を作成してみましょう。 テキストボックスとボタンの作成 Enter your Name:<input type="text" id="txtName" value="John"> <br> <button type="button" onclick="check()">Select Text Box<

  2. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st