Manual de referência HTML

大全 de etiquetas HTML

Método measureText() do canvas HTML

O método measureText() retorna uma informação sobre o TextMetrics objeto do texto medido (por exemplo, sua largura).

Exemplo online

Antes de escrever no canvas, verifique o largura do texto:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método measureText() do canvas HTML-基础教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3">
Seu navegador não suporta HTML5　canvas etiqueta
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "基础教程oldtoolbag.com"
　+　ctx.medirTexto(txt).largura,　10,　5
ctx.fillText(txt,　10,　100);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam medirTexto() método.

Atenção:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método medirTexto() retorna um objeto que contém a largura do texto especificado (em pixels).

Dica:Se precisar de saber o comprimento do texto antes de escrevê-lo na tela, use este método.

Sintaxe JavaScript:	contexto.medirTexto(texto).largura;

Valor do parâmetro

Parâmetro	Descrição
texto	Texto a medir.

Manual de referência do canvas HTML

HTML: <template> etiqueta