11月19, 2015

关于canvas的几个XX像素

这几个概念实在是太绕了,光想理顺它,就拖了好久才下笔整理下来

设备像素

  • 真实像素
  • 物理像素
  • 设备会有几个物理像素来表示一个css像素
  • canvas.width/height

设备独立像素(dip)

  • 与屏幕密度相关,与设备无关
  • 是计算机坐标系中的一点,是程序可用的虚拟像素
  • 逻辑像素
  • 比如CSS像素
  • canvas.style.width以及screen.width

设备像素比(devicePixelRatio)

  • 设备像素比 = 物理像素 / 设备独立像素
  • 设备像素比 = 设备像素 / CSS像素
  • 在非retina屏幕上,屏幕物理像素是320,独立像素也是320;在retina上,屏幕物理像素640,独立像素还是320,因此设备像素比为2
  • 可通过window.devicePixelRatio查看
  • 当它不等于1时,说明会用大于1个的物理像素以填充的方式来渲染1个逻辑像素,这样就出现了图片模糊的情况。
  • <meta name="viewport" content="width=device-width">的时候,其视区宽度并不是640像素,而是320像素,是独立像素值。
  • 并不是所有看上去清晰的手机屏幕都是2被devicePixelRatio的。有些不清晰的屏幕,还有可能是3倍的,比如酷派8675. 0中的webkitBackingStorePixelRatio是2.

  • webkitBackingStorePixelRatio 它只有在safari和chrome中才有的属性。它决定了浏览器在渲染一个图片的时候用几个像素来存储画布信息。比如,safari 6.0中,它的值为2,当要渲染100px*100px的图片时,它首先在内存中生成一个200*200的图片,当在retina屏下,devicePixelRatio=2时,屏幕本身会按照200*200来渲染图片,这时所需的大小正好与内存中一致,直接拿出来用就好,此时显示出来的图片就不会失真。否则若devicePixelRatio=1,那么图片就会被放大1倍来显示,就会变模糊了。

(小图变大会模糊,大图变小会更清晰)

参考

本文链接:https://imjiaolong.cn/post/canvas-devicePixelRatio.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。