HTML canvas measureText() 方法

HTML5 Canvas -käyttöohje

定义和用法

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

Kokeile itse

Syntaksi

context.measureText(text).width;

Parametrien arvot

Parametrit Kuvaus
text Mitä mitataan.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen version, joka tukee kyseistä ominaisuutta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.

HTML5 Canvas -käyttöohje