关于Canvas模糊的问题

Posted 2020-06-29

前言：当我在几个多月前，第一次在移动设备上使用canvas绘制内容的时候，我惊然地发现我绘制的图片以及文字居然都是模糊的！我的内心几乎是崩溃的，因为那是我第一个使用canvas的项目，是一个基于微信端的音乐同步消除文字的html5小游戏。由于性能上要过关，所以那次我才决定要把canvas搬上战场的。虽然那次的文字是模糊的，但项目还是上线了。我不甘心，所以那时我一连几周都在抽时间研究解决方案。那么问题来了，为什么canvas绘制的内容会在移动设备（视网膜屏幕）上显示模糊呢？在解答这个问题之前，先提出以下几个问题：

问题一：什么是视网膜屏幕？

　　根据百科资料解释，视网膜屏幕是指分辨率超过人眼识别极限的高分辨率屏幕。而人在一定距离时观察屏幕，只要每英寸长度所能够排列的像素（ppi）的数目超过了300个，人眼就无法识别了。现在我们使用的大部分移动设备屏幕都是视网膜屏幕，也就是将非常多数量的物理像素点压缩在一个相对很小的屏幕之中。

问题二：什么是设备像素比？

　　设备像素比其实也就是devicePixelRatio，它是物理像素和设备独立像素device-independent pixels (dips)之间的比值。由于视网膜屏都是具有很高的PPI，所以往往物理像素都会比设备的独立像素要大。移动设备上兼容性良好，Chrome,Safari和UC等，基本上是基于Webkit的浏览器都支持，但IE和FF一些老版本不支持。以下是window.devicePixelRatio的支持情况：

 

它是一个只读属性，浏览器的支持度还是很高的。移动端基本上全面支持，就连安卓2.1和Safari3.1都支持，只有IE10及以下不支持。