HTML Canvas - textAlign 屬性

來自 CanvasRenderingContext2D 介面的 HTML Canvas textAlign 屬性由上下文物件呼叫，以指定用於將文字繪製到 Canvas 元素的當前文字對齊方式。

可能的輸入值

該屬性接受的輸入值如下：

序號	值與描述
1	left 文字將左對齊。
2	right 文字將右對齊。
3	center 文字在畫布元素中居中。
4	start 文字從其正常位置開始。當沒有輸入時，這是屬性採用的預設值。
5	end 文字在其正常位置結束於畫布元素中。

示例

以下示例演示了 HTML Canvas direction 屬性的“left”和“right”值。

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

輸出

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

示例

以下示例演示了 HTML Canvas direction 屬性的“center”值。

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

輸出

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

示例

以下示例演示了 HTML Canvas direction 屬性的“start”和“end”值。

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

輸出

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

html_canvas_text.htm

列印頁面