Latest web development tutorials

HTML canvas measureText() 方法

HTML canvas 參考手冊 HTML canvas參考手冊

實例

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

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

嘗試一下»

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持measureText() 方法。

注意: Internet Explorer 8及之前的版本不支持<canvas>元素。


定義和用法

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

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

JavaScript 語法: context.measureText(text).width;

參數值

参数 描述
text 要测量的文本。


HTML canvas 參考手冊 HTML canvas參考手冊