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

HTML5 Canvasでテキストの高さを測定・取得する方法

HTML5 Canvasでテキストの高さを測定する方法

HTML5のcanvas要素で描画するテキストの高さ（フォントサイズ）を取得したい場合は、まずフォントを「pt」単位で設定します。

context.font = "15pt Calibri";

続いて、以下のようにしてテキストの高さを取得します。

var height = parseInt(context.font.match(/\d+/), 10);

コードの仕組み

上記のコードでは、match()メソッドと正規表現/\d+/を組み合わせて使用しています。この正規表現は文字列内の連続した数字にマッチするため、「15pt Calibri」というフォント指定文字列から、フォントサイズである「15」の部分だけを切り出すことができます。

match()が返すのは文字列なので、parseInt()を使って整数値に変換し、変数heightに格納しています。これにより、以降の処理でテキストの高さを数値として扱えるようになります。

ポイント

  • フォントサイズは必ず「pt」単位で指定すると、正規表現による抽出が確実に行えます。
  • match()の結果がnullになるケース（数字が含まれない場合）も考慮し、実運用ではnullチェックを入れておくと安全です。
  1. HTML5のcanvasタグとは？グラフィック描画の基本と使い方を解説

    HTML5で新たに導入された<canvas>タグは、JavaScriptなどのスクリプト言語を使って、図形・グラフ・アニメーションなどをWebページ上に直接描画するための要素です。画像ファイルに頼らず、動的でインタラクティブなグラフィック表現を実現できる点が大きな特徴です。 canvasタグの基本的な書き方 まずは、width属性とheight属性を指定したシンプルな<canvas>要素の例を見てみましょう。idやclassといったHTML5の共通属性も通常どおり組み合わせて使用できます。 <canvas id=myCanvas width=100 heigh

  2. IEでHTML5のcanvas要素を使う方法｜excanvasライブラリの導入手順

    IEでHTML5キャンバスを利用するには？Internet Explorer（IE）でHTML5の<canvas>要素を使用したい場合は、excanvasというJavaScriptライブラリを活用しましょう。excanvasはアドオン形式のライブラリで、旧式のIEブラウザ（IE7・IE8）にHTML5キャンバスの機能を追加してくれます。もともと、Firefox、Safari、Opera 9などはcanvasタグを標準サポートしており、2Dのコマンドベース描画操作が可能でしたが、IEだけは対応していませんでした。ExplorerCanvasの導入方法ExplorerCanvas（ex