最近在维护我的小程序,加了一个小功能。
功能描述:在一个canvas上输出的文字居中。
找了一下官网的API:
输出文字:fillText
居中:setTextAlign
然后我就写了如下代码:
效果如下图:
并没有在屏幕中间,然后我又搜了一下MDN上的解释:
注意红色划线的解释:对齐方式是以 X 的值为基点,然后在看看官网的 setTextAlign 最下面的图:
加上上面那句话,再看这张图片就很好理解了(微信小程序团队的小伙伴还真隐晦)。
有上面的一些准备就好办了,只要把 x 的值设置为canvas宽度的一半就好了。
因为我设置的canvas的宽度是100%,所以还得拿到屏幕的可用宽度,所以代码如下:
效果如下:
你以为现在结束了吗?
我还要提供另一种解法:
返回文本的宽度,代码如下:
效果也是一样的。
注意:
measureText是在1.9.90版本加上的,有兼容性问题
用此方法时,要在设置字体大小、样式之后,不然计算的是未设置之前的宽度