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

1次阅读

共计 440 个字符,预计需要花费 2 分钟才能阅读完成。

引子

在测试 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
正文完
 0