html5移动端如何解决canvas在移动端绘制模糊问题

这篇文章主要介绍“html5移动端如何解决canvas在移动端绘制模糊问题”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5移动端如何解决canvas在移动端绘制模糊问题”文章能帮助大家解决问题。

在解释问题之前，首先需要了解一些移动端显示和cavans的小知识，方便后面探究。如果想直接看结果的话看可以拉到最后。

关于屏幕的一些基础知识

物理像素（DP）

物理像素也称设备像素，我们常听到的手机的分辨率及为物理像素，比如 iPhone 7的物理分辨率为750 * 1334。屏幕是由像素点组成的，也就是说屏幕的水平方向有750的像素点，垂直方向上有1334个像素点

设备独立像素（DIP）

也称为逻辑像素，比如Iphone4和Iphone3GS的尺寸都是3.5寸，iphone4的物理分辨率是640 * 980，而3gs只有320 * 480，假如我们按照真实布局取绘制一个320px宽度的图像时，在iphone4上只有一半有内容，剩下的一半则是一片空白，为了避免这种问题，我们引入了逻辑像素，将两种手机的逻辑像素都设置为320px，方便绘制

设备像素比（DPR）

上面的设备独立像素说到底是为了方便计算，我们统一了设备的逻辑像素，但是每个逻辑像素所代表的物理像素却不是确定的，为了确定在未缩放情况下，物理像素和逻辑像素的关系，我们引入了设备像素比(DPR)这个概念

设备像素比 = 设备像素 / 逻辑像素
DPR = DP / DIP

关于canvas的一些基础知识

 canvas绘制的是位图

这是一个所有了解过canvas的人都应该知道的知识点，也是接下来我们将要分析问题的核心。

关于位图的解释我们放在后面，现在我们只要知道canvas绘制的图像是位图。

canvas的width和height属性

canvas的width和height属性是初学者非常容易搞错的内容。这两个属性经常会与css中的width和height属性混淆。

比如我们有如下代码（1）:

<canvas width="600" height="300" ></canvas>

• style中的width和height分别代表canvas这个元素在界面上所占据的宽高， 即样式上的宽高

• attribute中的width和height 则代表canvas实际像素的宽高

如果还无法理解的话，可以想象成以下的代码（2）：

<!-- logo.png的像素为600 * 300  -->
<img   src="logo.png" />

canvas默认的width和height是300 * 150，对其设置了css之后， canvas会根据设置css宽高进行缩放（注意不是裁剪） ，这一点和img标签一样

上述代码（1）其实还可以再换一种更通俗的解释方式，就是1个逻辑像素实际上由2个canvas像素填充。

模糊原因的初步探讨

上面是对所需基础知识的一些简介，下面开始正式进行探究。

首先我们提到使用canvas绘制图像的是位图，而我们平常用的jpg，png也是位图。那么什么是位图？

位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。具象一点讲，可以将位图想象成一个巨大的拼图，这个拼图有无数的拼块，每个拼块代表了一个纯色的像素点。 理论上，1个位图像素对应着1个物理像素 。但假如说你使用了高清屏，比如苹果的retina屏去查看一幅图画，又会是什么样子呢？

假设我们有如下代码，该代码将展示在iphone4的retina屏上：

<canvas width="320" height="150" ></canvas>

iphone4本身的物理像素为640 * 980，而设备独立像素为320 * 480，这代表着1个css像素实际由4个物理像素构成，canvas的像素为320 * 150，其css像素为320 * 150，则代表1个css像素将会由1个canvas元素构成，这样进行换算， 在retina屏幕下，1个canvas像素（或者说是1个位图像素）将会填充4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊 。

幕后黑手---平滑处理技术

下面是我的某位大佬同学帮我解释的，刚才我们说了每个位图元素实际上一个纯色的像素点。现在假设我们需要在一个css大小为4px * 4px，dpr为1普通屏幕上绘制一个数字“0”，那么我们绘制的样子应该如下图，其中1代表黑色像素点，0代表白色像素点。

可以看出在dpr比较小的情况下，我们的“0”这个图案还比较明显，现在假如我们css大小不变，但是改成在retina屏幕下绘制图像，效果又会变成什么样呢？

我们已知在retina屏幕下，一个css像素代表4个物理像素，假如我们不做任何处理，直接按照上面矩阵排列，将矩阵扩大的话，会发现在retina屏幕下，我们的图案锯齿感非常明显，图像明显缺乏了一丝顺化。

原因总结

通过了上述的解释，现在我们来总结以下结论，在移动端盛行，高清屏基本上已经普及的现在，1px的css像素实际上代表了4个甚至更多的物理像素。但是由于我们的代码问题，我们1px的css像素和1个canvas像素画上了等号，也就导致了1个canvas像素实际需要填充4个甚至更多物理像素，为了保证图像平滑处理，在填充剩余的物理像素时采用了原先颜色的近似值，导致了图像的模糊。

解决思路

了解了问题出现的原因，解决问题就很容易，解决该问题最重要的一点是让1个canvas像素和一个物理像素挂等号

高版本的浏览器的window对象下都挂着一个devicePixelRatio属性，该属性就是上面所说的dpr,

在canvas元素css宽高确定的情况下，我们可以这么做

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let dpr = window.devicePixelRatio; // 假设dpr为2
// 获取css的宽高
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
canvas.width = dpr * cssWidth;
canvas.height = dpr * cssHeight;
// 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小
// 所以需要将绘制比例放大
ctx.scale(dpr,dpr);

关于“html5移动端如何解决canvas在移动端绘制模糊问题”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。