現(xiàn)象描述

　　同樣大小的圖片（60x60px）用canvas和DOM繪制，結(jié)果發(fā)現(xiàn)canvas的畫(huà)面質(zhì)量要差很多。結(jié)果如下圖所示。

　　上圖中，左側(cè)紅框中的金幣采用DOM繪制，右側(cè)和下方的金幣和文字等使用canvas繪制，結(jié)果canvas繪制的圖片模糊不清。

原因分析

　　假設(shè)dpr = 2；圖片大小為60x60px;對(duì)dpr有一定的了解基礎(chǔ)。

　　1.DOM呈現(xiàn)圖片過(guò)程

　　圖片——》瀏覽器css像素（顯示尺寸）——》屏幕實(shí)際像素

　　60x60              30x30                              60x60

　　圖片像素——》實(shí)際像素

　　1： 1

　　2.canvas繪制過(guò)程

　　圖片像素——》canvas像素（畫(huà)布尺寸）——》css像素（顯示尺寸）——》屏幕實(shí)際像素

　　60x60               30x30                              30x30                          60x60

　　圖片像素——》畫(huà)布像素——》實(shí)際像素

　　4：                    1：                  4

　　也就是說(shuō)，canvas的繪制過(guò)程中圖片到畫(huà)布的過(guò)程中進(jìn)行了像素的抽稀，畫(huà)布到屏幕像素時(shí)又進(jìn)行了插值，所以造成圖片質(zhì)量下降。

解決方案

　　放大畫(huà)布的尺寸，但是canvas顯示尺寸不變；

　　圖片像素——》canvas像素（畫(huà)布尺寸）——》css像素（顯示尺寸）——》屏幕實(shí)際像素

　　60x60               60x60                                           30x30            60x60

　　圖片像素——》實(shí)際像素

　　1：                1 

而canvas的設(shè)計(jì)的時(shí)候正好有對(duì)象的屬性來(lái)分別管理畫(huà)布尺寸和顯示尺寸；canvas的width、height屬性用于管理畫(huà)布尺寸；canvas的style屬性中的width、height正好是顯示尺寸。

也就是說(shuō)解決方案就是設(shè)置舞臺(tái)的尺寸和圖片像素的尺寸一致，顯示尺寸為正常顯示尺寸；假設(shè)canvas的顯示尺寸為窗口寬度，創(chuàng)建canvas的時(shí)候指定canvas的width屬性為2 * body.clientHeight；style.widht為body.clientHeight + 'px';

改變后的效果圖如下：

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論