HTML 参考手册

HTML 标签大全

HTML canvas measureText() 方法

measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。

在线示例

在画布上书写之前，请检查文本的宽度：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas measureText() 方法使用-基础教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 标签
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "基础教程oldtoolbag.com"
　+　ctx.measureText(txt).largeur,　10,　5
ctx.fillText(txt,　10,　100);
</script>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge measureText() méthode.

Attention :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode measureText() renvoie un objet contenant la largeur du texte spécifié (en pixels).

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

Syntaxe JavaScript :	contexte.mesureTexte(texte).largeur;

Valeur du paramètre

Paramètre	Description
texte	Texte à mesurer.

Manuel de référence HTML canvas

HTML: <template> balise