HTML Canvas - textBaseline 屬性

CanvasRenderingContext2D 介面中的 HTML Canvas textBaseline 屬性由上下文物件呼叫，用於指定在 Canvas 元素上繪製文字時使用的當前文字基線。

可能的輸入值

該屬性接受的輸入值為：

序號	值和描述
1	top 使用“em 方塊”的頂部作為文字基線。
2	middle 使用“em 方塊”的中間作為文字基線。
3	bottom 使用邊界框的底部作為文字基線。
4	alphabetic 使用正常的字母基線作為文字基線在 Canvas 元素上繪製文字。
5	ideographic 文字基線為表意基線，主要用於韓語、日語和漢語等語言文字。
6	hanging 文字基線為懸掛基線，通常用於藏文和印度文字等語言文字。

示例 1

以下示例演示了 HTML Canvas textBaseline 屬性的“top”和“bottom”值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textBaseline = "top";
      context.fillText(context.textBaseline, 10, 75);
      context.textBaseline = "bottom";
      context.fillText(context.textBaseline, 90, 75);
   </script>
</body>

輸出

上述程式碼在網頁上返回的輸出為：

示例 2

以下程式程式碼演示了 Canvas 元素上所有可用的 textBaseline 屬性值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="700" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.font = "25px Verdana";
      context.textBaseline = "top";
      context.strokeText(context.textBaseline, 0, 75);
      context.textBaseline = "hanging";
      context.strokeText(context.textBaseline, 80, 75);
      context.textBaseline = "middle";
      context.strokeText(context.textBaseline, 210, 75);
      context.textBaseline = "alphabetic";
      context.strokeText(context.textBaseline, 310, 75);
      context.textBaseline = "ideographic";
      context.strokeText(context.textBaseline, 450, 75);
      context.textBaseline = "bottom";
      context.strokeText(context.textBaseline, 610, 75);
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

html_canvas_text.htm

列印頁面