canvas繪圖不清晰的解決方案

canvas 作圖經常會遇到canvas繪制的圖片模糊不清問題，這種問題實際上是畫布尺寸與畫布范圍內實際像素不一致造成的。了解 dpr

 

原因分析

　　假設dpr = 2；圖片大小為60x60px;  

　　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';

  // 計算設備的dpr
        function setupCanvas(canvas) { var dpr = (scale = window.devicePixelRatio || 1); var rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; canvas.style.width = rect.width + "px" canvas.style.height = rect.height + "px"
          return canvas; }