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

[XXHolic]

场景

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

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

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

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

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

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

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

参考资料

• html5 canvas doesn't fill text at coordinates (0,0)
• textBaseline