canvas在Retina屏下模糊问题
站长
· 阅读数 40
canvas绘制时钟
前两天用canvas写了一个时钟；放在页面上,效果图如下，咋一看没毛病，挺好的；很正常啊！！毕竟不是专业的世界，屁颠屁颠提交代码，搞定需求；
今天突然传来噩耗，UI反馈这个时钟有点糊！有点糊！！糊！！！
哪就糊了？？？？
我用canvas一笔一笔画的，直接能生成图片，怎么会糊？难道canvas还分3倍图2倍图？？
不过UI既然反馈，那肯定是要查一查的。毕竟没有证据也不好【据理力争】不是吗😄
随后询问了UI浏览器，环境，电脑等可能引起这个缺陷的场景；
最后锁定在Mac的Retina屏幕下，canvas图回出现【糊】这个问题；我也不清楚【糊】是什么意思，UI说这个现象就是【糊】
复现场景解决问题
因为之前做过移动端H5页面，里面有个名为dpr的东西；
后来查到devicePixelRatio的定义是显示设备的物理像素分辨率与CSS像素分辨率之比；
简单描述dpr： 当dpr=1设置1px在浏览器上会显示1px; 当dpr=2设置1px在浏览器上会显示2px; 当dpr=3设置1px在浏览器上会显示3px;
所以首先怀疑是不是PC端也会有这个dpr
很幸运在devicePixelRatio此处正好遇到devicePixelRatio应用场景；真的是幸运妈妈给幸运开门--幸运到家了；
按照栗子开搞；
优化后的效果图
果然清晰了好多，给UI设计师点赞
声明
该方法仅仅在Mac电脑谷歌浏览器中测试通过；其他浏览器兼容性，请自行查阅
参考文献
转载自:https://juejin.cn/post/7037107450977189919