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).ancho,　10,　5
ctx.fillText(txt,　10,　100);
</script>
</body>
</html>

Verifique aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten measureText() método.

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método measureText() devuelve un objeto que contiene el ancho del texto especificado (en píxeles).

Consejo:Si necesita saber el ancho del texto antes de que se escriba en el lienzo, utilice este método.

Sintaxis de JavaScript:	contexto.medirTexto(texto).ancho;

Valor del parámetro

Parámetros	Descripción
texto	Texto a medir.

Manual de referencia de canvas HTML

HTML: <template> etiqueta