小编给大家分享一下如何解决画布在移动端绘制模糊的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf。js这个插件,该插件可以将pdf转换成画布绘制在页面上。不过,在测试过程中却发现,在移动端的浏览器上,绘制的内容展示十分模糊(如下图),经过分析之后发现是由于移动端高清屏幕引起的。在解决问题之后以文字方式记述原因和探究结果
在解释问题之前,首先需要了解一些移动端显示和卡文的小知识,方便后面探究。如果想直接看结果的话看可以拉到最后。
<强>关于屏幕的一些基础知识
<强>物理像素(DP)
物理像素也称设备像素,我们常听到的手机的分辨率及为物理像素,比如iPhone 7的物理分辨率为750 * 1334。屏幕是由像素点组成的,也就是说屏幕的水平方向有750的像素点,垂直方向上有1334个像素点
<强>设备独立像素(DIP)
也称为逻辑像素,比如Iphone4和Iphone3GS的尺寸都是3.5寸,Iphone4的物理分辨率是640 * 980,而3 gs只有320 * 480,假如我们按照真实布局取绘制一个320 px宽度的图像时,在Iphone4上只有一半有内容,剩下的一半则是一片空白,为了避免这种问题,我们引入了逻辑像素,将两种手机的逻辑像素都设置为320 px,方便绘制
<强>设备像素比(DPR)
上面的设备独立像素说到底是为了方便计算,我们统一了设备的逻辑像素,但是每个逻辑像素所代表的物理像素却不是确定的,为了确定在未缩放情况下,物理像素和逻辑像素的关系,我们引入了设备像素比(DPR)这个概念
上面说了很多理论、下面附个图解释一下
从上面的图可以看的出,在同样大小的逻辑像素下,高清屏所具有的物理像素更多。普通屏幕下,1个逻辑像素对应1个物理像素,而在dpr=2的高清屏幕下,1个逻辑像素由4个物理像素组成。这也是为什么高清屏更加细腻的原因。
<强>关于画布的一些基础知识
, <强>帆布绘制的是位图
这是一个所有了解过油画的人都应该知道的知识点,也是接下来我们将要分析问题的核心。
关于位图的解释我们放在后面,现在我们只要知道帆布绘制的图像是位图。
<强>画布的宽度和高度属性
画布的宽度和高度属性是初学者非常容易搞错的内容。这两个属性经常会与css中的宽度和高度属性混淆。
比如我们有如下代码(1):
中风格的宽度和高度分别代表画布这个元素在界面上所占据的宽高,<强>即样式上的宽高
<李>属性中的宽度和高度<强>则代表帆布实际像素的宽高
如果还无法理解的话,可以想象成以下的代码(2):
canvas默认的width和height是300 * 150，对其设置了css之后， canvas会根据设置css宽高进行缩放（注意不是裁剪） ，这一点和img标签一样
上述代码（1）其实还可以再换一种更通俗的解释方式，就是1个逻辑像素实际上由2个canvas像素填充。
模糊原因的初步探讨
上面是对所需基础知识的一些简介，下面开始正式进行探究。
首先我们提到使用canvas绘制图像的是位图，而我们平常用的jpg，png也是位图。那么什么是位图？
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。具象一点讲，可以将位图想象成一个巨大的拼图，这个拼图有无数的拼块，每个拼块代表了一个纯色的像素点。 理论上，1个位图像素对应着1个物理像素如何解决画布在移动端绘制模糊的问题
