現象描述

　　同樣大小的圖片（60x60px）用canvas和DOM繪制，結果發現canvas的畫面質量要差很多。結果如下圖所示。

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

原因分析

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

　　1.DOM呈現圖片過程

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

　　60x60              30x30                              60x60

　　圖片像素――》實際像素

　　1： 1

　　2.canvas繪制過程

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

　　60x60               30x30                              30x30                          60x60

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

　　4：                    1：                  4

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

解決方案

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

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

　　60x60               60x60                                           30x30            60x60

　　圖片像素――》實際像素

　　1：                1 

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

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

改變后的效果圖如下：

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！