canvas 文本坐标(0,0)显示问题

引子

在测试 canvas 文字显示的时候,发现坐标设为(0,0),文字显示会有问题。

文本坐标(0,0)显示问题

刚开始本以为使用 canvas 的方法不对,尝试改变坐标后,发现又可以显示。这是问题示例,扫描访问二维码如下。

27-qrcode-problem

查询资料,发现了类似的问题,原因是 canvas 中的文本坐标位置,是按照属性 textBaseline 设置的基线作为参考,默认值是 alphabetic。效果如下图。

27-img-textbaseline

当位置坐标为(0,0)时,文本基线以上的就不在 canvas 显示区域内了,详细文档见 MDN textBaseline。将 textBaseline 设置为 top 就可以正常显示,这是正常示例,扫描访问二维码如下。

27-qrcode-normal

在测试的过程中,发现英文可以正常显示,但中文,字体大小不同,顶部显示可能有稍微的截断。目前想到的解决方法有:

  • 调整到适当的字体大小。
  • 将文本显示的位置稍微的下移。

参考资料

阅读 126

推荐阅读