摘要：不過(guò)，在測(cè)試過(guò)程中卻發(fā)現(xiàn)，在移動(dòng)端的瀏覽器上，繪制的內(nèi)容展示十分模糊如下圖，經(jīng)過(guò)分析之后發(fā)現(xiàn)是由于移動(dòng)端高清屏幕引起的。這也是為什么高清屏更加細(xì)膩的原因。

由于一些移動(dòng)端的兼容性原因，我們某個(gè)項(xiàng)目需要前端將pdf轉(zhuǎn)換成在移動(dòng)端頁(yè)面可直接觀看的界面。為了方便解決，我們采用了pdf.js這個(gè)插件，該插件可以將pdf轉(zhuǎn)換成canvas繪制在頁(yè)面上。不過(guò)，在測(cè)試過(guò)程中卻發(fā)現(xiàn)，在移動(dòng)端的瀏覽器上，繪制的內(nèi)容展示十分模糊（如下圖），經(jīng)過(guò)分析之后發(fā)現(xiàn)是由于移動(dòng)端高清屏幕引起的。 在解決問(wèn)題之后以文字方式記述原因和探究結(jié)果

在解釋問(wèn)題之前，首先需要了解一些移動(dòng)端顯示和cavans的小知識(shí)，方便后面探究。如果想直接看結(jié)果的話看可以拉到最后。

物理像素（DP）
物理像素也稱(chēng)設(shè)備像素，我們常聽(tīng)到的手機(jī)的分辨率及為物理像素，比如 iPhone 7的物理分辨率為750 * 1334。屏幕是由像素點(diǎn)組成的，也就是說(shuō)屏幕的水平方向有750的像素點(diǎn)，垂直方向上有1334個(gè)像素點(diǎn)

設(shè)備獨(dú)立像素（DIP）
也稱(chēng)為邏輯像素，比如Iphone4和Iphone3GS的尺寸都是3.5寸，iphone4的物理分辨率是640 980，而3gs只有320 480，假如我們按照真實(shí)布局取繪制一個(gè)320px寬度的圖像時(shí)，在iphone4上只有一半有內(nèi)容，剩下的一半則是一片空白，為了避免這種問(wèn)題，我們引入了邏輯像素，將兩種手機(jī)的邏輯像素都設(shè)置為320px，方便繪制

設(shè)備像素比（DPR）
上面的設(shè)備獨(dú)立像素說(shuō)到底是為了方便計(jì)算，我們統(tǒng)一了設(shè)備的邏輯像素，但是每個(gè)邏輯像素所代表的物理像素卻不是確定的，為了確定在未縮放情況下，物理像素和邏輯像素的關(guān)系，我們引入了設(shè)備像素比(DPR)這個(gè)概念

設(shè)備像素比 = 設(shè)備像素 / 邏輯像素 
DPR = DP / DIP

上面說(shuō)了很多理論，下面附個(gè)圖解釋一下

從上面的圖可以看出，在同樣大小的邏輯像素下，高清屏所具有的物理像素更多。普通屏幕下，1個(gè)邏輯像素對(duì)應(yīng)1個(gè)物理像素，而在dpr = 2的高清屏幕下，1個(gè)邏輯像素由4個(gè)物理像素組成。這也是為什么高清屏更加細(xì)膩的原因。

canvas繪制的是位圖
這是一個(gè)所有了解過(guò)canvas的人都應(yīng)該知道的知識(shí)點(diǎn)，也是接下來(lái)我們將要分析問(wèn)題的核心。
關(guān)于位圖的解釋我們放在后面，現(xiàn)在我們只要知道canvas繪制的圖像是位圖。

canvas的width和height屬性
canvas的width和height屬性是初學(xué)者非常容易搞錯(cuò)的內(nèi)容。這兩個(gè)屬性經(jīng)常會(huì)與css中的width和height屬性混淆。
比如我們有如下代碼（1）:

style中的width和height分別代表canvas這個(gè)元素在界面上所占據(jù)的寬高，即樣式上的寬高

attribute中的width和height則代表canvas實(shí)際像素的寬高

如果還無(wú)法理解的話，可以想象成以下的代碼（2）：

canvas默認(rèn)的width和height是300 * 150，對(duì)其設(shè)置了css之后，canvas會(huì)根據(jù)設(shè)置css寬高進(jìn)行縮放（注意不是裁剪），這一點(diǎn)和img標(biāo)簽一樣
上述代碼（1）其實(shí)還可以再換一種更通俗的解釋方式，就是1個(gè)邏輯像素實(shí)際上由2個(gè)canvas像素填充。

上面是對(duì)所需基礎(chǔ)知識(shí)的一些簡(jiǎn)介，下面開(kāi)始正式進(jìn)行探究。

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

位圖又叫像素圖或柵格圖，它是通過(guò)記錄圖像中每一個(gè)點(diǎn)的顏色、深度等信息來(lái)存儲(chǔ)和顯示圖像。具象一點(diǎn)講，可以將位圖想象成一個(gè)巨大的拼圖，這個(gè)拼圖有無(wú)數(shù)的拼塊，每個(gè)拼塊代表了一個(gè)純色的像素點(diǎn)。理論上，1個(gè)位圖像素對(duì)應(yīng)著1個(gè)物理像素。但假如說(shuō)你使用了高清屏，比如蘋(píng)果的retina屏去查看一幅圖畫(huà)，又會(huì)是什么樣子呢？

假設(shè)我們有如下代碼，該代碼將展示在iphone4的retina屏上：

iphone4本身的物理像素為640 980，而設(shè)備獨(dú)立像素為320 480，這代表著1個(gè)css像素實(shí)際由4個(gè)物理像素構(gòu)成，canvas的像素為320 150，其css像素為320 150，則代表1個(gè)css像素將會(huì)由1個(gè)canvas元素構(gòu)成，這樣進(jìn)行換算，在retina屏幕下，1個(gè)canvas像素（或者說(shuō)是1個(gè)位圖像素）將會(huì)填充4個(gè)物理像素，由于單個(gè)位圖像素不可以再進(jìn)一步分割，所以只能就近取色，從而導(dǎo)致圖片模糊。

如果還有疑惑的話，以下的圖片可以說(shuō)明位圖在retina屏幕下是如何填充的：

上圖中左側(cè)的是在普通屏幕下的顯示規(guī)則，可以看出有4個(gè)位圖像素點(diǎn)，而右側(cè)的高清屏幕下則有16個(gè)像素點(diǎn)。由于像素點(diǎn)不可切割的原因，顏色產(chǎn)生了改變。

但是還有一點(diǎn)沒(méi)有解釋清楚，就是為什么圖片會(huì)就近取色而不是直接取原值，這也是導(dǎo)致模糊的幕后黑手。

下面是我的某位大佬同學(xué)幫我解釋的，剛才我們說(shuō)了每個(gè)位圖元素實(shí)際上一個(gè)純色的像素點(diǎn)?，F(xiàn)在假設(shè)我們需要在一個(gè)css大小為4px * 4px，dpr為1普通屏幕上繪制一個(gè)數(shù)字“0”，那么我們繪制的樣子應(yīng)該如下圖，其中1代表黑色像素點(diǎn)，0代表白色像素點(diǎn)。

可以看出在dpr比較小的情況下，我們的“0”這個(gè)圖案還比較明顯，現(xiàn)在假如我們css大小不變，但是改成在retina屏幕下繪制圖像，效果又會(huì)變成什么樣呢？

我們已知在retina屏幕下，一個(gè)css像素代表4個(gè)物理像素，假如我們不做任何處理，直接按照上面矩陣排列，將矩陣擴(kuò)大的話，會(huì)發(fā)現(xiàn)在retina屏幕下，我們的圖案鋸齒感非常明顯，圖像明顯缺乏了一絲順化。

假如我們對(duì)圖像稍作改變，改成下圖這樣

圖像感覺(jué)瞬間柔和了，但是原本應(yīng)該4個(gè)0充斥的地方變成了3個(gè)1加上1個(gè)0。這其實(shí)就是所謂的圖像平滑處理，為了解決鋸齒感覺(jué)，將原本的顏色改變，在充斥著較多顏色的圖片上，為了更自然，圖片的連接處變成了近似的顏色，這也解釋了為什么上面填充顏色的時(shí)候不是使用本色而是使用近似色。

通過(guò)了上述的解釋?zhuān)F(xiàn)在我們來(lái)總結(jié)以下結(jié)論，在移動(dòng)端盛行，高清屏基本上已經(jīng)普及的現(xiàn)在，1px的css像素實(shí)際上代表了4個(gè)甚至更多的物理像素。但是由于我們的代碼問(wèn)題，我們1px的css像素和1個(gè)canvas像素畫(huà)上了等號(hào)，也就導(dǎo)致了1個(gè)canvas像素實(shí)際需要填充4個(gè)甚至更多物理像素，為了保證圖像平滑處理，在填充剩余的物理像素時(shí)采用了原先顏色的近似值，導(dǎo)致了圖像的模糊。

了解了問(wèn)題出現(xiàn)的原因，解決問(wèn)題就很容易，解決該問(wèn)題最重要的一點(diǎn)是讓1個(gè)canvas像素和一個(gè)物理像素掛等號(hào)

高版本的瀏覽器的window對(duì)象下都掛著一個(gè)devicePixelRatio屬性，該屬性就是上面所說(shuō)的dpr,

在canvas元素css寬高確定的情況下，我們可以這么做

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let dpr = window.devicePixelRatio; // 假設(shè)dpr為2
// 獲取css的寬高
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根據(jù)dpr，擴(kuò)大canvas畫(huà)布的像素，使1個(gè)canvas像素和1個(gè)物理像素相等
canvas.width = dpr * cssWidth;
canvas.height = dpr * cssHeight;
// 由于畫(huà)布擴(kuò)大，canvas的坐標(biāo)系也跟著擴(kuò)大，如果按照原先的坐標(biāo)系繪圖內(nèi)容會(huì)縮小
// 所以需要將繪制比例放大
ctx.scale(dpr,dpr);

很多時(shí)候，我們發(fā)現(xiàn)了問(wèn)題，不能只集中于問(wèn)題的解決，而是應(yīng)該深入去了解問(wèn)題發(fā)生的原因，這樣才能更好的在這行走下去。

作者：carbrokers