游览器缩小放大改变的是什么,canvas怎么做适配

https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

https://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=zh

https://segmentfault.com/a/1190000009511784

https://www.jianshu.com/p/2cd5143cf9aa

游览器缩小放大改变的是

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
devicePixelRatio = physical pixels / dips

即用多少个物理像素展示一个css像素。

 

模糊发生的情况：

如果一个图片是100*100像素大小，去200*200的web上进行展示，（被拉伸了），就模糊了。

 

为什么canvas会模糊：

Canvas 不是矢量图而像图片一样是位图模式的，如果不做高清屏适配的话浏览器就会以多个像素点的宽度来渲染一个像素，相当于图片被放大多倍而因此变模糊。所以要

1.设置canvas 的高和宽分别乘以 ratio 将其放大   

2.然后再用 css 将其样式高和宽限制成初始的大小。

以上都是基于放大的情况的考虑。

 

如果canvas缩小怎么办？

当浏览器缩放的时候，devicePixelRatio=0.5 <1,即代表用0.5个物理像素来渲染1个css像素，这样只要等比例就不会模糊。

 

那么其实还是这样，缩小canvas的实际高和宽，

再做scale.

ctx.scale(devicePixelRatio, devicePixelRatio);

如果canvas不做对应的缩小，那么相当于canvas被拉伸了，就糊了。