HTML Canvas - 新增文字

我們已經瞭解瞭如何在 Canvas 元素中繪製圖形以及對其進行樣式設定。現在，我們將瞭解如何在 Canvas 元素中繪製文字。

繪製文字

要在 Canvas 元素上渲染文字，可以使用兩種方法，如下表所示。

序號	方法及描述
1	fillText(text, x, y, maximum_width) 使用此方法時，給定的文字將插入到 Canvas 中的 (x, y) 位置並填充。我們可以不為最大寬度引數賦值（或）給定一個值以繪製具有給定寬度的文字。
2	strokeText (text, x, y, maximum_idth) 此方法在 Canvas 元素內的給定位置 (x, y) 繪製描邊文字。我們也可以為文字提供寬度引數進行繪製，或者將其保留在預設大小。

序號

方法及描述

fillText(text, x, y, maximum_width)

使用此方法時，給定的文字將插入到 Canvas 中的 (x, y) 位置並填充。我們可以不為最大寬度引數賦值（或）給定一個值以繪製具有給定寬度的文字。

strokeText (text, x, y, maximum_idth)

此方法在 Canvas 元素內的給定位置 (x, y) 繪製描邊文字。我們也可以為文字提供寬度引數進行繪製，或者將其保留在預設大小。

示例

讓我們使用 font 屬性透過文字繪製方法繪製文字以清楚地理解它。以下程式碼演示瞭如何使用可用方法在 Canvas 上繪製文字。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>drawing text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = '55px Verdana';
            context.fillText('This text is filled', 10, 50);
            context.strokeText('This text is stroked', 10, 100);
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出為

文字樣式

我們可以使用樣式屬性對 Canvas 上繪製的文字進行樣式設定。我們在上面的示例中已經看到了 font 屬性。可以使用四個屬性來設定 Canvas 上文字的樣式，每個屬性都列在下面的表格中。

序號	屬性及描述	可接受的值
1	font 使用此屬性設定文字大小和字型樣式。預設值為 10px 大小，字型樣式為 sans-serif。文字大小以畫素為單位，字型樣式以字串為單位。如果初始化時有任何錯誤，則忽略給定的 font 屬性。	Canvas.font="text_size font_style";
2	textAlign 此屬性可用於設定 Canvas 中文字的位置。文字的預設位置為“start”。它只更改水平對齊方式。	'start', 'end', 'left', 'right', 'center'.
3	textBaseline 此屬性用於更改畫布文字的基線對齊方式。預設值為“alphabetic”。它設定文字的垂直對齊方式。	'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'.
4	direction 它設定 Canvas 文字的方向性。預設值為“inherit”。	'ltr', 'rtl', 'inherit'.

示例 1

以下示例演示了 HTML5 Canvas 中文字的 font 和 textAlign 屬性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="550" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.textAlign = "start";
            context.fillText(context.textAlign, 10, 75);
            context.textAlign = "end";
            context.fillText(context.textAlign, 500, 75);
            context.textAlign = "left";
            context.fillText(context.textAlign, 140, 75);
            context.textAlign = "right";
            context.fillText(context.textAlign, 390, 75);
            context.textAlign = "center";
            context.fillText(context.textAlign, 275, 75);
         }
      </script>
   </body>
</html>

輸出

以下程式碼返回的輸出為

示例 2

以下程式碼為所有可用值實現了textBaseline屬性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="700" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            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>

輸出

以下程式碼的輸出為

示例 3

我們將在以下示例中演示文字方向。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.fillText('direction-', 150, 50);
            context.direction = 'rtl';
            context.fillText('direction-', 150, 130);
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出為

測量文字

此方法用於獲取有關文字的更多詳細資訊。它允許我們測量文字。用於實現此目的的方法是 measureText('text_string') - 此方法返回一個文字物件，其中包含輸入文字以畫素為單位的寬度，當以給定的當前樣式繪製時。

示例

以下程式碼演示了measureText()方法。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>styling text</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="text();">
      <canvas id="canvas" width="600" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function text() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.font = "25px Verdana";
            context.strokeText("hello", 10, 50);
            var text = context.measureText('hello');
            window.alert(text.width);
         }
      </script>
   </body>
</html>

輸出

程式碼返回的輸出為

列印頁面