如何在HTML画布中集中对齐文本？

Question

当我遇到这个小问题时，我正在制作一个小型JavaScript游戏：文本不是集中对齐的。 一个简单的例子：

var txt="Lorem Ipsum";
context.fillText(txt,100,100);

现在的问题是文本的开头是100,100点。所以后来当我将txt的值更改为更长的句子时，它仍然从100,100开始绘制，降低了程序的美学吸引力。

我的问题是，有没有办法以这样的方式绘制文本，即给定的坐标标记文本的中心而不是开头？

Answer 1

您可以使用textAlign：

context.textAlign = "center";

Answer 2

您可以使用上下文的measureText()方法获取文本的宽度，然后根据它进行调整。所以我们假设您想将它放在画布的中心，然后

(canvas.width / 2) - (ctx.measureText(txt).width / 2)

给出文本应该去的位置。在垂直情况下：

(canvas.height / 2) - (ctx.measureText(txt).height / 2)

其中canvas是HTML5 Canvas本身，而ctx是2DContext对象：

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