HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas measureText() メソッド

measureText() メソッドは、測定されたテキストのTextMetrics オブジェクトに含まれる情報（例えば、その幅）を返します。

オンラインサンプル

キャンバスにテキストを書く前に、テキストの幅を確認してください：

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas measureText() メソッドの使用-基础教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
あなたのブラウザはHTMLをサポートしていません5　canvas タグ
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "基础教程oldtoolbag.com"
ctx.fillText("width:")　+　ctx.measureText(txt).width,　10,　5
ctx.fillText(txt,　10,　100);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は measureText() をサポートしています。メソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

measureText() メソッドは、指定されたテキストの幅（ピクセル単位）を含むオブジェクトを返します。

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

JavaScript 文法：	context.measureText(text).width;

パラメータ値

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

HTML canvas 参考マニュアル

HTML: <template> タグ