HTML Canvas textalign 属性

在 HTML Canvas 中，我们经常需要绘制文本。为了让文本在 Canvas 中的位置更加灵活和精确，我们可以使用 textalign 属性来控制文本的对齐方式。textalign 属性可以设置文本相对于给定的坐标的对齐方式，包括左对齐、居中和右对齐。

使用 textalign 属性

在 Canvas 中，我们可以通过以下代码来设置文本的对齐方式：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.fillText('Hello World', canvas.width / 2, canvas.height / 2);

在上面的代码中，我们首先获取了 Canvas 元素和 2D 上下文，然后设置了文本的字体大小为 20px，并使用 textAlign 属性将文本居中对齐。最后使用 fillText 方法在 Canvas 中绘制了文本 "Hello World"。

textalign 属性值

textalign 属性可以接受以下三个值：

• start：默认值，文本在给定的坐标的起始位置对齐。
• center：文本在给定的坐标的中心位置对齐。
• end：文本在给定的坐标的结束位置对齐。

示例

下面是一个简单的示例，演示了如何使用 textalign 属性来控制文本的对齐方式：

// www.javascriptcn.com code example
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.font = '20px Arial';

// 左对齐
ctx.textAlign = 'start';
ctx.fillText('Left Aligned', 50, 50);

// 居中
ctx.textAlign = 'center';
ctx.fillText('Center Aligned', canvas.width / 2, 100);

// 右对齐
ctx.textAlign = 'end';
ctx.fillText('Right Aligned', canvas.width - 50, 150);

在上面的示例中，我们分别使用了 start、center 和 end 三种对齐方式，绘制了左对齐、居中和右对齐的文本。

通过灵活运用 textalign 属性，我们可以更好地控制文本在 Canvas 中的位置，使得我们的 Canvas 应用更加灵活和美观。