Méthode measureText() du canvas

Définition et utilisation

measureText() La méthode retourne un objet contenant la largeur de la police spécifiée en pixels.

Astuce :Si vous avez besoin de connaître la largeur du texte avant de l'écrire sur le canevas, utilisez cette méthode.

Exemple

Vérifiez la largeur de la police avant d'écrire du texte sur le canevas :

Votre navigateur ne prend pas en charge la balise HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("largeur:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

essayez-le personnellement

grammaire

context.measureText(text).width;

Valeur du paramètre

Paramètres Description
text Le texte à mesurer.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :Les versions 8 et antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.