幕后黑手—平滑处理技术
下面是我的某位大佬同学帮我解释的，刚才我们说了每个位图元素实际上一个纯色的像素点。现在假设我们需要在一个css大小为4px * 4px，dpr为1普通屏幕上绘制一个数字“0”，那么我们绘制的样子应该如下图，其中1代表黑色像素点，0代表白色像素点。
可以看出在dpr比较小的情况下，我们的“0”这个图案还比较明显，现在假如我们css大小不变，但是改成在retina屏幕下绘制图像，效果又会变成什么样呢？
我们已知在retina屏幕下，一个css像素代表4个物理像素，假如我们不做任何处理，直接按照上面矩阵排列，将矩阵扩大的话，会发现在retina屏幕下，我们的图案锯齿感非常明显，图像明显缺乏了一丝顺化。
假如我们对图像稍作改变，改成下图这样
图像感觉瞬间柔和了， 但是原本应该4个0充斥的地方变成了3个1加上1个0。这其实就是所谓的图像平滑处理，为了解决锯齿感觉，将原本的颜色改变，在充斥着较多颜色的图片上，为了更自然，图片的连接处变成了近似的颜色，这也解释了为什么上面填充颜色的时候不是使用本色而是使用近似色。
原因总结
通过了上述的解释，现在我们来总结以下结论，在移动端盛行，高清屏基本上已经普及的现在，1px的css像素实际上代表了4个甚至更多的物理像素。但是由于我们的代码问题，我们1px的css像素和1个canvas像素画上了等号，也就导致了1个canvas像素实际需要填充4个甚至更多物理像素，为了保证图像平滑处理，在填充剩余的物理像素时采用了原先颜色的近似值，导致了图像的模糊。
解决思路
了解了问题出现的原因，解决问题就很容易，解决该问题最重要的一点是让1个canvas像素和一个物理像素挂等号
高版本的浏览器的window对象下都挂着一个devicePixelRatio属性，该属性就是上面所说的dpr,
在canvas元素css宽高确定的情况下，我们可以这么做
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let dpr = window.devicePixelRatio; // 假设dpr为2
// 获取css的宽高
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
