最近在做一个h5游戏的时候,用到了Phaser.js这个游戏引擎,可以将游戏的所有过程全部放在一个canvas里,在开发的过程中,发现正常切出来的图放在canvas里会变得模糊,网上有很多关于这个问题的文章,解决方案大致是使用phaser.js生成canvas标签时传进的height、width参数要在原先基础上乘以设备的dpr:
var game = new Phaser.Game(width * devicePixelRatio, height * devicePixelRatio, Phaser.AUTO, '#game');
然后将canvas标签的css样式中的width、height属性规定为正常值:
canvas = document.getElementsByTagName('canvas')[0];
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
OK,到这里图片恢复了high quality。
Buuuuuuuuuut
在接下来的开发过程中又发现了另外一个问题!!!!!!!!
在H5打开的状态中,切后台运行、锁屏(移动端),或者最小化浏览器(pc端)等操作,再返回H5页面,canvas里的元素全部被放大了。
一开始,我用js监测各种width、innerWidth、clientWidth、offsetWidth……等等等等各种属性,都没有发现有什么属性改变了,用尽各种方法,毫无头绪。
在一筹莫展之际,偶然的一次最小化浏览器,终于让我发现了问题:
最小化之前
最小化后返回
呵呵呵呵呵呵…
找到了问题,就可以把问题按在地上摩擦了
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
console.log('page hidden');
}else{
console.log('page show');
setTimeout(() => {
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}, 100);
}
},false);
监听页面的隐藏事件,在返回后重新强制赋值