Canvas measureText() 方法

定義和用法

measureText() 方法返回包含一個對象,該對象包含以像素計的指定字體寬度。

提示:如果您需要在文本向畫布輸出之前,就了解文本的寬度,那么請使用該方法。

實例

在畫布上輸出文本之前,檢查字體的寬度:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + 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> 元素。