HTML使用Phaser 引擎显示的图片很模糊

Question

在使用Phaser游戏引擎之后，原本很高清的图片在渲染之后都会变得很模糊，有谁遇到过这种问题吗？下面是创建实例的代码：
//创建游戏实例
const game = new Phaser.Game(width, height, Phaser.AUTO, '#game');
//加载图片
game.load.image('publisher','../images/publisher.png');
麻烦有经验的大佬指导一下。。。。

Answer 1

原来是设置了Phaser的分辨率问题
如果在手机端，建议改成1080 * 1920的分辨率。
const game = new Phaser.Game(1080, 1920, Phaser.AUTO, '#game');
改变分辨率之后图片就变得清晰多了。

Answer 2

这个问题其实和canvas模糊是一回事

最简单有效的解决办法是你在设置phaser画布宽高的时候乘以设备的devicePixelRatio
然后phaser初始化时候是可以设置css样式和父级的，将parent设置为你需要展示的大小。canvasStyle设置为width:100%;height:100%即可