canvas画的文字在安卓移动设备上可以显示,但是在ios移动设备上无法显示
如题,注释了大部分代码后,最终发现问题出在段代码上:
//UI设计基础宽度:750px;
ctx.font = "3rem sans-serif";
一开始担心是iOS Safari的壳不支持canvas,查了https://caniuse.com/ 发现其实是支持的。
查询结果如下:
项目中做了移动端rem适配的(在基础UI设计宽度为750px的情况下,1rem=12.5px),
document.documentElement.style.fontSize = document.documentElement.clientWidth / 60 + "PX";
所以直接用了rem,但是iOS Safari只支持标准的canvas,标准的canvas只支持px不支持rem。
所以这个问题解决方案是将rem转换回px,如下:
//UI设计基础宽度:750px;
ctx.font = 3*12.5+"px sans-serif";
但是移动端有各种宽度的屏幕,为了适应各种屏幕是不能写死,所以最终下法应该如下:
//获取设备宽度
let clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas font字体的占比进行设置
let fontWidth = clientWidth*3*12.5/750;
//设置自适应的字体大小
ctx.font = fontWidth+"px sans-serif";