Canvas measureText() メソッド

定義と用法

measureText() メソッドは、指定されたフォントの幅をピクセルで示すオブジェクトを含むオブジェクトを返します。

ヒント:テキストをキャンバスに描画する前にテキストの幅を知りたい場合は、このメソッドを使用してください。

テキストをキャンバスに描画する前に、フォントの幅を確認してください:

ブラウザはHTML5のキャンバスタグをサポートしていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("幅: " + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

自分で試してみてください

文法

context.measureText(text).width;

パラメータの値

パラメータ 説明
text 測定するテキスト

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記:Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。