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: