En este artículo, encontraremos la altura del lienzo de texto usando JavaScript.
Enfoque: En el siguiente ejemplo, se utiliza el atributo de altura del lienzo HTML. Primero establezca la fuente en pt para establecer la altura.
context.font = '26pt Calibri';
Luego, el texto actual se alinea en el centro usando los valores ‘medio’ y color ‘amarillo’.
context.textAlign = 'middle'; context.fillStyle = 'yellow';
Luego, verifique el ancho del texto usando el método measureText() antes de escribir en el lienzo. Finalmente, el texto se escribe en el lienzo utilizando el método fillText() .
Ejemplo 1:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="550" height="200">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 3;
var y = canvas.height / 2 - 15;
var text = 'HI ';
// Set the font to set the height
context.font = '26pt Calibri';
context.textAlign = 'middle';
context.fillStyle = 'yellow';
context.fillText(text, x, y);
context.font = '20pt Calibri';
// Check the width of the text
var metrics = context.measureText(text);
var width = metrics.width;
// Text is aligned in the left
context.textAlign = 'left';
context.fillStyle = '#010';
context.fillText('(' + width
+ 'px wide)', x, y + 40);
</script>
</body>
</html>
Producción:
Enfoque: primero obtenga el contexto de dibujo 2d del lienzo utilizando el método getContext() . Establezca la fuente y la string de texto. Luego escriba el texto con las coordenadas x e y usando el método fillText() como se indica a continuación.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<canvas id="Canvas" width="300" height="150"
style="border:1px solid #010;">
Your browser isn't supporting
HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("Canvas");
var x = c.getContext("2d");
x.font = "30px Arial";
var txt = "Computer Science"
x.fillText("width:"
+ x.measureText(txt).width, 10, 50);
x.fillText(txt, 10, 100);
</script>
</body>
</html>
Producción:
