Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo measureText() su canvas HTML

Il metodo measureText() restituisce un oggetto TextMetrics che contiene informazioni sul testo misurato (ad esempio, la sua larghezza).

Manuale di riferimento per HTML canvas

Esempio online

Prima di scrivere sul riquadro, controlla la larghezza del testo:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo measureText() su canvas HTML5 - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il suo browser non supporta il tag canvas HTML5
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "教程基oldtoolbag.com"
ctx.fillText("larghezza:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);
</script>
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano measureText() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo measureText() restituisce un oggetto che contiene la larghezza del testo specificato (in pixel).

Suggerimento:Se si desidera sapere la larghezza del testo prima di inviarlo al canvas, utilizzare questo metodo.

Sintassi JavaScript:	contesto.measureText(testo).larghezza;

Valore del parametro

Parametro	Descrizione
testo	Testo da misurare.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta