在 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 属性来控制文本的对齐方式：
-- -------------------- ---- ------- ----- ------ - ------------------------------------ ----- --- - ------------------------ -------- - ----- ------- -- --- ------------- - -------- ------------------ --------- --- ---- -- -- ------------- - --------- -------------------- --------- ------------ - -- ----- -- --- ------------- - ------ ------------------- --------- ------------ - --- -----
在上面的示例中，我们分别使用了 start、center 和 end 三种对齐方式，绘制了左对齐、居中和右对齐的文本。
通过灵活运用 textalign 属性，我们可以更好地控制文本在 Canvas 中的位置，使得我们的 Canvas 应用更加灵活和美观。