关于javascript:canvas-文本坐标00显示问题

引子

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

• Origin
• My GitHub

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

刚开始本认为应用 canvas 的办法不对，尝试扭转坐标后，发现又能够显示。这是问题示例，扫描拜访二维码如下。

查问材料，发现了相似的问题，起因是 canvas 中的文本坐标地位，是依照属性 textBaseline 设置的基线作为参考，默认值是 alphabetic。成果如下图。

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

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

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

参考资料

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