canvas画图在移动端模糊解决方法

在解决这个问题之前，首先得了解以下背景知识。

 

一、移动端像素相关

 

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决定的