HTML | 画布 textAlign 属性

在 HTML 中，<canvas> 标签用于绘制图形，可以通过 JavaScript 对其内部的绘图元素进行操作。textAlign 属性用于设置文本的对齐方式。

语法

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.textAlign = "center";
  ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

属性

textAlign 属性有以下几个取值：

• start：默认值，文本将从左侧开始绘制
• end：文本将从右侧开始绘制
• center：文本将在水平方向上居中绘制
• left：文本将从左侧开始绘制
• right：文本将从右侧开始绘制

示例

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 设置文本的对齐方式为居中
  ctx.textAlign = "center";

  // 绘制文本
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>

输出效果