Wulin.com (www.vevb.com) Introdução ao artigo: Para obter a medição de texto do texto da tela HTML5, podemos usar o método de contexto de tela de measuringtext (). Este método requer uma sequência de texto e retorna uma fonte para o texto fornecido com base em um objeto de medição e atribuído ao texto atual do contexto.
Para obter métricas de texto do HTML5 Canvas, podemos usar o método do contexto de tela do MeasureText (). Este método requer uma sequência de texto e retorna uma fonte para o texto fornecido com base em um objeto de medição e atribuído ao texto atual do contexto.
Atualmente, a largura do texto é a única medida com o método measureText (). Atualmente, o Sistema Métrico de Texto não é suportado.
<! Doctype html>
<html>
<head>
<estilo>
corpo {
margem: 0px;
preenchimento: 50px;
}
#mycanvas {
fronteira: 1px Solid #9C9898;
}
</style>
<Cript>
window.onload = function () {
var Canvas = document.getElementById (mycanvas);
var context = Canvas.getContext (2D);
var x = Canvas.width / 2;
var y = Canvas.Height / 2 - 10;
Var Text = Hello World!;
context.font = 30pt calibri;
context.TexTalign = Center;
context.fillstyle = azul;
context.fillText (texto, x, y);
// Obtenha métricas de texto
var métricas = context.MeasureText (texto);
var largura = métricas.width;
context.font = 20pt calibri;
context.TexTalign = Center;
context.fillstyle = #555;
context.fillText (( + largura + px de largura), x, y + 40);
};
</script>
</head>
<Body onMousedown = retornar false;>
<canvas id = mycanvas width = 578 altura = 200>
</canvas>
</body>
</html>