HTML Canvas - actualBoundingBoxDescent 屬性

HTML Canvas actualBoundingBoxAscent 的 TextMetrics 介面屬性是一種只讀方法，它返回一個雙精度值，給出從 CanvasRenderingContext2D 介面上下文物件的文字基線指示的水平線到渲染文字的邊界矩形框“頂部”的距離。雙精度值以 CSS 畫素為單位給出。

HTML Canvas actualBoundingBoxDescent 的 TextMetrics 介面屬性是一種只讀方法，它返回一個雙精度值，給出從 CanvasRenderingContext2D 介面上下文物件的文字基線指示的水平線到渲染文字的邊界矩形框“底部”的距離。雙精度值以 CSS 畫素為單位給出。

示例 1 −（返回值）

以下示例演示了 HTML Canvas actualBoundingBoxAscent 和 actualBoundingBoxDescent 屬性。實現的程式碼如下。

<!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("Bounding box ascent : " + word.actualBoundingBoxAscent + "\nBounding box descent : " + word.actualBoundingBoxDescent);
      }
   </script>
</body>
</html>

產出

以上程式碼在網頁上彈出的輸出視窗警報為 −

HTML Canvas ActualBoundingBoxDescent Property

html_canvas_text.htm

列印頁面

上一個

下一個