SYNCERのロゴ
アイキャッチ画像

テキストの幅を取得する方法

Canvasでテキストの幅を取得するには、コンテキストのmeasureText()を利用しましょう。幅を取得するのにレンダリングする必要がないため、事前に情報を取得できます。

サンプルコード

フォントの条件を指定して、measureText()にテキストを指定すると、metricsオブジェクトを取得できます。このオブジェクトのwidthプロパティに、幅を表す数値が含まれています。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// フォントの条件を設定
context.font = "bold 24px Arial, meiryo, sans-serif" ;

// 「SYNCER」というテキストを描く場合の幅を取得 (a.widthに幅を表す数値が含まれる)
var a = context.measureText( "SYNCER" ) ;

デモ

フォントサイズとテキストを変更して、幅がどのように変わるのか確認してみて下さい。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

var text = "SYNCER" ;
var fontSize = 24 ;

context.beginPath () ;

context.font = "bold " + fontSize + "px Arial, meiryo, sans-serif" ;
var a = context.measureText( text ) ;

// 確認のためレンダリング
context.fillText( text, 0, 100 + (fontSize/2) ) ;

200x200のキャンパスです。

a.width = 0

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月3日 (木)
コンテンツを公開しました。