小程序--Canvas文字居中

最近在维护我的小程序，加了一个小功能。

功能描述：在一个canvas上输出的文字居中。

找了一下官网的API:

1. 输出文字：fillText
2. 居中：setTextAlign

然后我就写了如下代码：

效果如下图：

并没有在屏幕中间，然后我又搜了一下MDN上的解释：

注意红色划线的解释：对齐方式是以 X 的值为基点，然后在看看官网的 setTextAlign 最下面的图：

加上上面那句话，再看这张图片就很好理解了（微信小程序团队的小伙伴还真隐晦）。

有上面的一些准备就好办了，只要把 x 的值设置为canvas宽度的一半就好了。

因为我设置的canvas的宽度是100%，所以还得拿到屏幕的可用宽度，所以代码如下：

效果如下：

你以为现在结束了吗？

我还要提供另一种解法：

返回文本的宽度，代码如下：

效果也是一样的。

注意：

1. measureText是在1.9.90版本加上的，有兼容性问题
2. 用此方法时，要在设置字体大小、样式之后，不然计算的是未设置之前的宽度