這篇文章主要介紹“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個物理像素,由于單個位圖像素不可以再進一步分割,所以只能就近取色,從而導致圖片模糊 。
幕后黑手---平滑處理技術
下面是我的某位大佬同學幫我解釋的,剛才我們說了每個位圖元素實際上一個純色的像素點?,F在假設我們需要在一個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在移動端繪制模糊問題”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。