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);

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