Canvas measureText() メソッド
定義と用法
measureText()
メソッドは、指定されたフォントの幅をピクセルで示すオブジェクトを含むオブジェクトを返します。
ヒント:テキストをキャンバスに描画する前にテキストの幅を知りたい場合は、このメソッドを使用してください。
例
テキストをキャンバスに描画する前に、フォントの幅を確認してください:
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> 要素をサポートしていません。