HTML Canvas - fontBoundingBoxAscent 属性

TextMetrics 接口的 HTML Canvas fontBoundingBoxAscen 属性是一种只读方法，它返回一个双精度值，给出水平线到 CanvasRenderingContext2D 接口上下文对象的文本基线以及为文本渲染用于的所有字体的最高边界矩形框的顶部的距离。双精度值以 CSS 像素给出。

TextMetrics 接口的 HTML Canvas fontBoundingBoxDescent 属性是一种只读方法，它返回一个双精度值，给出水平线到 CanvasRenderingContext2D 接口上下文对象的文本基线以及为文本渲染用于的所有字体的最高边界矩形框的底部的距离。双精度值以 CSS 像素给出。

示例

以下示例演示了 HTML Canvas fontBoundingBoxAscent 和 fontBoundingBoxDescent 属性。实现代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="text();">
   <canvas id="canvas" width="500" height="100" style="border: 1px solid black;"></canvas>
   <script>
      function text() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.font = '50px Verdana';
         context.fillText('TutorialsPoint', 50, 50);
         var word = context.measureText('TutorialsPoint');
         alert("font ascent : " + word.fontBoundingBoxAscent + "\nfont descent : " + word.fontBoundingBoxDescent);
      }
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下 -

HTML Canvas FontBoundingBoxAscent Property

html_canvas_text.htm

打印页面

上一个

下一个