深刻了解canvas在移動端繪製模糊的問題

因爲一些移動端的兼容性緣由，咱們某個項目須要前端將pdf轉換成在移動端頁面可直接觀看的界面。爲了方便解決，咱們採用了pdf.js這個插件，該插件能夠將pdf轉換成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
  複製代碼

上面說了不少理論，下面附個圖解釋一下

從上面的圖能夠看出，在一樣大小的邏輯像素下，高清屏所具備的物理像素更多。普通屏幕下，1個邏輯像素對應1個物理像素，而在dpr = 2的高清屏幕下，1個邏輯像素由4個物理像素組成。這也是爲何高清屏更加細膩的緣由。

關於canvas的一些基礎知識

• canvas繪製的是位圖

  這是一個全部瞭解過canvas的人都應該知道的知識點，也是接下來咱們將要分析問題的核心。

  關於位圖的解釋咱們放在後面，如今咱們只要知道canvas繪製的圖像是位圖。

• canvas的width和height屬性

  canvas的width和height屬性是初學者很是容易搞錯的內容。這兩個屬性常常會與css中的width和height屬性混淆。

  好比咱們有以下代碼（1）:

  <canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>
  複製代碼

  • style中的width和height分別表明canvas這個元素在界面上所佔據的寬高，即樣式上的寬高
  • attribute中的width和height則表明canvas實際像素的寬高

  若是還沒法理解的話，能夠想象成如下的代碼（2）：

  <!-- logo.png的像素爲600 * 300 -->
  <img style="width: 300px; height: 150px" 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" style="width: 320px; height: 150px"></canvas>
複製代碼

iphone4自己的物理像素爲640 * 980，而設備獨立像素爲320 * 480，這表明着1個css像素實際由4個物理像素構成，canvas的像素爲320 * 150，其css像素爲320 * 150，則表明1個css像素將會由1個canvas元素構成，這樣進行換算，在retina屏幕下，1個canvas像素（或者說是1個位圖像素）將會填充4個物理像素，因爲單個位圖像素不能夠再進一步分割，因此只能就近取色，從而致使圖片模糊。

若是還有疑惑的話，如下的圖片能夠說明位圖在retina屏幕下是如何填充的：

上圖中左側的是在普通屏幕下的顯示規則，能夠看出有4個位圖像素點，而右側的高清屏幕下則有16個像素點。因爲像素點不可切割的緣由，顏色產生了改變。

可是還有一點沒有解釋清楚，就是爲何圖片會就近取色而不是直接取原值，這也是致使模糊的幕後黑手。

幕後黑手---平滑處理技術

下面是個人某位大佬同窗幫我解釋的，剛纔咱們說了每一個位圖元素實際上一個純色的像素點。如今假設咱們須要在一個css大小爲4px * 4px，dpr爲1普通屏幕上繪製一個數字「0」，那麼咱們繪製的樣子應該以下圖，其中1表明黑色像素點，0表明白色像素點。

能夠看出在dpr比較小的狀況下，咱們的「0」這個圖案還比較明顯，如今假如咱們css大小不變，可是改爲在retina屏幕下繪製圖像，效果又會變成什麼樣呢？

咱們已知在retina屏幕下，一個css像素表明4個物理像素，假如咱們不作任何處理，直接按照上面矩陣排列，將矩陣擴大的話，會發如今retina屏幕下，咱們的圖案鋸齒感很是明顯，圖像明顯缺少了一絲順化。

假如咱們對圖像稍做改變，改爲下圖這樣

圖像感受瞬間柔和了，可是本來應該4個0充斥的地方變成了3個1加上1個0。這其實就是所謂的圖像平滑處理，爲了解決鋸齒感受，將本來的顏色改變，在充斥着較多顏色的圖片上，爲了更天然，圖片的鏈接處變成了近似的顏色，這也解釋了爲何上面填充顏色的時候不是使用本色而是使用近似色。

緣由總結

經過了上述的解釋，如今咱們來總結如下結論，在移動端盛行，高清屏基本上已經普及的如今，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);
複製代碼

經驗總結

不少時候，咱們發現了問題，不能只集中於問題的解決，而是應該深刻去了解問題發生的緣由，這樣才能更好的在這行走下去。