¿Cómo encontrar la altura de un texto en el lienzo HTML usando JavaScript?

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:

Publicación traducida automáticamente

Artículo escrito por msd_vk y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *