Métricas de texto del lienzo HTML5

Autor：Eve Cole Fecha de actualización：2025-05-06 10:48:02

Wulin.com (www.vevb.com) Introducción al artículo: Para obtener la medición de texto del texto del lienzo HTML5, podemos usar el método de contexto de lienzo medirText (). Este método requiere una cadena de texto y devuelve una fuente para el texto proporcionado basado en un objeto de medición y asignado al texto actual del contexto.

Para obtener métricas de texto del lienzo HTML5, podemos usar el método del contexto de lienzo de medyettext (). Este método requiere una cadena de texto y devuelve una fuente para el texto proporcionado basado en un objeto de medición y asignado al texto actual del contexto.

Actualmente, el ancho del texto es la única medida con el método MedeReText (). Actualmente no es compatible con el sistema métrico alto de texto.

<! Doctype html>

<html>

cuerpo {

margen: 0px;

relleno: 50px;

}

#mycanvas {

borde: 1px Solid #9C9898;

}

</style>

window.onload = function () {

var lienvas = document.getElementById (mycanvas);

VAR context = Canvas.getContext (2d);

var x = canvas.width / 2;

var y = Canvas.Height / 2 - 10;

Var Text = ¡Hola mundo!;

context.font = 30pt calibri;

context.textalign = Center;

context.fillstyle = azul;

context.fillText (texto, x, y);

// Obtener métricas de texto

VAR METRICS = context.measurEtext (texto);

VAR Width = Metrics.Width;

context.font = 20pt calibri;

context.textalign = Center;

context.fillstyle = #555;

context.fillText (( + ancho + px de ancho), x, y + 40);

};

</script>

</ablo>

</able>

</body>

</html>