Canvas文本绘制的浏览器差异

今日想通过canvas动态生成图像的方式来替代png资源,但遇到了一些问题。

canvas textBaseline 属性可以设置文本的绘制基线,但在不同浏览器中表现方式略有不一样。

这里指讲middle属性的差异,其他值可自行研究。

当textBaseline被设置为middle后,IE/Chrome/Opera可以正确地将基线设置为字体垂直中心,但Firefox则会略微向上偏离。下面是Chrome和Firefox的对比图:

这里写图片描述

这里写图片描述

如果对基线对准要求特别高,可以采用如下解决方案:

经测量,Firefox中middle对齐方式,100px的字体会相对向上偏移12px,以此类推。
因此只要检测到Firefox浏览器后对canvas进行变换即可:

if(client.engine.gecko!=0){
    context.translate(0,-12);
}
原文地址:https://www.cnblogs.com/qs20199/p/4452267.html