Canvas measureText() methode

Definitie en gebruik

measureText() De methode retourneert een object dat een object bevat met de breedte van het gespecificeerde lettertype in pixels.

Tip:Als u de breedte van de tekst wilt weten voordat u deze naar het canvas schrijft, gebruik dan deze methode.

Voorbeeld

Controleer de breedte van het lettertype voordat u tekst op het canvas uitgeeft:

Uw browser ondersteunt de HTML5 canvas tag niet.

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;

Parameter Value

Parameter Description
text The text to be measured.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.