現(xiàn)象描述

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

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

原因分析

　　假設dpr = 2；圖片大小為60x60px;對dpr有一定的了解基礎。

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

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

　　60x60              30x30                              60x60

　　圖片像素——》實際像素

　　1： 1

　　2.canvas繪制過程

　　圖片像素——》canvas像素（畫布尺寸）——》css像素（顯示尺寸）——》屏幕實際像素

　　60x60               30x30                              30x30                          60x60

　　圖片像素——》畫布像素——》實際像素

　　4：                    1：                  4

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

解決方案

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

　　圖片像素——》canvas像素（畫布尺寸）——》css像素（顯示尺寸）——》屏幕實際像素

　　60x60               60x60                                           30x30            60x60

　　圖片像素——》實際像素

　　1：                1 

而canvas的設計的時候正好有對象的屬性來分別管理畫布尺寸和顯示尺寸；canvas的width、height屬性用于管理畫布尺寸；canvas的style屬性中的width、height正好是顯示尺寸。

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

改變后的效果圖如下：

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論