在介绍的最近的工作中，是继canvas宽高问题之后遇到的第二个问题。OriginMyGitHub显示模糊问题在PC浏览器上显示时，没有发现明显的模糊，可以接受。但是在手机上会有明显的模糊。这是一个示例，扫描访问二维码如下。例子中用css控制canvas的宽高，但是里面的图片不一致。查询资料，在stackoverflow发现同样的问题，通过实测发现：canvas元素本身的属性width和height决定了画布上可以显示多少个像素，如果不设置，width默认值为300，而高度的默认值为150。css的属性width和height是指元素显示在屏幕上的大小。如果画布没有css设置，将使用画布的默认大小。如果设置了css属性width和height，当使用drawImage设置画布中图片的宽高时，显示的宽高值会按照一定比例转换。比如上面的例子，设置的图片宽300，高90，画布默认的宽高分别是300和150像素。我真的没有在规范中看到这一点。原因是我在stackoverflow上也找到了相关问题，答案里面有一篇相关文章HTML5Rocks。原因是画布的绘制与设备像素比（devicePixelRatio）无关。受devicePixelRatio的影响，在高清显示器上，一个逻辑像素对应多个实际设备物理像素。比如在devicePixelRatio为2的设备上，css设置的100px表示要在设备上填充200px的物理像素，所以canvas在绘制100px的区域时，实际上是要在设备上填充100px的物理像素，但是由于devicePixelRatio的作用，设备需要显示200px的物理像素，浏览器会智能地填充像素之间的空间，以适当的大小显示元素。Safari6支持一个属性backingStorePixelRatio，它决定了浏览器在渲染画布时将使用多少像素来绘制画布。像devicePixelRatio这样的东西。Safari6的值为2，所以画布在Safari6中不会模糊，但是后来去掉了，现在浏览器不支持这个属性，详见Issue277205。解决方案解决方案是通过检测设备的像素比，绘制倍数对应的canvas元素。方法如下：functioncreateHDCanvas(w=300,h=150){varratio=window.devicePixelRatio||1;varcanvas=document.createElement('canvas');canvas.width=w*ratio;//实际渲染像素canvas.height=h*ratio;//实际渲染像素canvas.style.width=`${w}px`;//控制显示尺寸canvas.style.height=`${h}px`;//控制显示大小canvas.getContext('2d').setTransform(ratio,0,0,ratio,0,0);returncanvas;}这是一个对比示例，扫描二维码进入如下。参考画布元素如何修复HTML5画布中的模糊文本？为什么不推荐使用context2d.backingStorePixelRatio？
