如何使用 JavaScript 在 HTML 画布中查找文本的高度？

在本文中，我们将使用 JavaScript 找到文本画布的高度。

方法：在下面的示例中，使用了 HTML 画布的高度属性。首先在pt中设置字体来设置高度。

context.font = '26pt Calibri';

然后使用值“中间”和颜色“黄色”将当前文本居中对齐。

context.textAlign = 'middle';
context.fillStyle = 'yellow';

然后，在写入画布之前使用measureText()方法检查文本的宽度。最后，使用fillText()方法将文本写在画布上。

示例 1：

HTML

  

    
        body {
            margin: 0px;
            padding: 0px;
        }
    

  

    
    
    
        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);
    

  

输出：

方法：首先通过getContext()方法获取canvas的2d绘制上下文。设置字体和文本字符串。然后使用fillText()方法用 x 和 y 坐标编写文本作为 下面给出。

示例 2：

HTML

  

    
        Your browser isn't supporting 
        HTML5 canvas tag.
    
  
    
        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);
    

  

输出：