在解决这个问题之前，首先得了解以下背景知识。
一、移动端像素相关
1. 屏幕分辨率 ：屏幕上面的像素点数，1280x720表示这个显示器水平方向有1280个像素，垂直方向上有720个像素。
2. dpi（点 每英寸）：d是显示器上每一个物理的点，p指的是屏幕分辨率中的最小单位
3. ppi（像素 每英寸）: 每英寸所拥有的像素数量，PPI数值越高，图像越清晰。
在浏览器中，可以通过 window.devicePixelRatio 获取 设备上物理像素和设备独立像素的比例。
在 devicePixelRatio > 1 的浏览器或手机上画图，你就会发现图片模糊。这是因为图片被放大了 devicePixelRatio 倍， 我们处理的时候对其进行像素压缩即可实现图片不模糊。
二、canvas的width,height和style.width以及style.height的区别
1、canvas绘制是以自己真实大小（width,height）来定位&绘制的，最后由浏览器渲染到页面可见时，由canvas.style.width/cavnas.style.height决定的