基于canvas的游戏在retina屏上模糊的解决方案

使用的游戏引擎是phaser

但是遇到了一个问题,就是在retina屏上,图片等会有锯齿。

原因是retina屏上一个物理像素等于两个css像素。把canvas视图调成两倍宽高,再用css压缩到原尺寸并不可行,原因是框架在绘图到canvas上的时候,记录的都是canvas上的像素坐标点,当点击屏幕的时候,识别到的坐标点就和原canvas上的坐标点不一致了,造成了物理碰撞,点击等事件都会错位。

求解决方法TT

阅读 5.8k
2 个回答

渲染 2倍的canvas ,
然后用css去缩小canvas到屏幕大小就可以了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏