MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

CanvasRenderingContext2D.measureText()

CanvasRenderingContext2D.measureText() メソッドは、測定したテキストの情報 (例えば幅など) を持つ TextMetrics オブジェクトを返します。

構文

TextMetrics ctx.measureText(text);

引数

text
測定する文字列。

戻り値

TextMetrics オブジェクト。

以下の <canvas> 要素があるとします:

<canvas id="canvas"></canvas>

以下のコードを使用して TextMetrics オブジェクトを得ることができます:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var text = ctx.measureText("foo"); // TextMetrics オブジェクト
text.width; // 16;

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.measureText の定義
現行の標準  

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 有り 有り 有り9 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 有り 有り 有り 有り 有り 有り ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: woodmix, yyss
 最終更新者: woodmix,