JavaScript 如何在HTML画布中找到文本的高度

在本文中，我们将使用JavaScript查找HTML画布中文本的高度。我们有两种方法可以使用JavaScript在HTML画布中找到文本的高度，具体如下：

方法1

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

context.font = '26pt Calibri';

然后，通过使用值“middle”和颜色“yellow”将当前文本居中对齐。

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

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

示例： 此示例演示了上述方法的使用。

<body style="margin: 0px;padding: 0px;"> 
    <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>

输出：

JavaScript 如何在HTML画布中找到文本的高度

方法2

首先使用 getContext() 方法获取画布的2D绘图上下文。设置字体和文本字符串。然后使用 fillText() 方法将文本写入指定的x和y坐标，如下所示。

示例： 这个示例展示了上述方法的使用。

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

输出:

JavaScript 如何在HTML画布中找到文本的高度