canvas绘制的内容在高清屏中模糊以及错乱问题。

最近在做一个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);

监听页面的隐藏事件,在返回后重新强制赋值

你可能感兴趣的:(canvas)