Canvas measureText() 方法
示例
在將文字繪製到畫布之前，檢查文字的寬度
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
let txt = "Hello World"
ctx.fillText("寬度:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);
自己動手試一試 »
另請參閱
font 屬性 (設定文字字型和大小)
fillStyle 屬性 (設定文字顏色/漸變)
textAlign 屬性 (設定文字對齊方式)
textBaseline 屬性 (設定文字基線)
fillText() 方法 (繪製文字)
strokeText() 方法 (繪製文字)
描述
measureText() 方法返回一個物件，該物件包含指定文字的寬度（以畫素為單位）。
提示： 如果您需要在將文字繪製到畫布之前瞭解其寬度，請使用此方法。
| JavaScript 語法 | context.measureText(text).width; |
|---|
引數值
| 引數 | 描述 | 試一試 |
|---|---|---|
| text | 需要測量的文字 | 試一試 » |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
measureText() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
