トップページ  > Canvas  > measureText(text)

★Canvasリファレンス

context . measureText(text) …… テキストの描画幅を測定する
Internet Explorer9 Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera9Opera10
広告

measureText(text)メソッドは、テキストの描画幅を測定する際に使用します。

引数textは、幅を測定する文字列を表します。 measureText()メソッドに文字列を指定すると、テキストの描画幅がCSSピクセルの単位で返ります。 返り値はwidth属性に代入されます。

測定されるのは、現在のフォントでテキストを描画した場合の描画幅です。 従って、font属性でフォントの種類やサイズを変更すれば、返り値が変化することになります。 また、描画環境によって返り値のピクセル数が異なることがあるので注意してください。

■テキストの描画幅は、emスクエアのサイズから取得

measureText()メソッドで返されるピクセル値は、emスクエアのサイズから取得されます。 もし、文字の境界ボックスがemスクエアからはみ出している場合には、 fillText()メソッドや strokeText()メソッドで実際に文字を描画した際に、 measureText()メソッドで取得されたピクセル値からはみ出すこともありえます。 Canvasの2DコンテキストAPIの現行バージョンの仕様では、 文字の境界ボックスの寸法を取得する方法はありません(将来的には取得方法が提供されるかもしれません)。

■引数(値)の説明

text
描画幅を測定する文字列

■使用例

HTML + JavaScriptソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
  //描画コンテキストの取得
  var canvas = document.getElementById('sample');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //ここに具体的な描画内容を指定する
    //幅を測定する文字列を指定
    var metrics = context.measureText("abcABCあいう漢字");

    //文字列を描画
    context.fillText("abcABCあいう漢字", 20, 50);
    //文字列の幅をテキストとして描画
    context.fillText(metrics.width, 20, 75);
  }
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
↓↓↓

ブラウザ上の表示

Canvasで図形を描く

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

■関連項目

<canvas> …… 図形を描くHTML5から追加
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ