問題：canvas在高清屏顯示模糊

前幾天在做PDF預覽時（使用mozilla的pdf.js），發現PDF文字在canvas中顯示非常模糊，在網上搜出來的中文結果都沒有這方面相關的，後面用英文搜尋到了原因，因為我測試用的是retina屏。立即用普通顯示器上試了一下，表現果然是正常的。

分析

裝置畫素比 = 物理畫素 / 裝置獨立畫素dip
canvas元素依賴於裝置畫素比，在retina屏中裝置畫素比是2，意味著寬度為100px的canvas，需要200px的填充才會清晰地顯示。

解決方法

既然是高清屏的原因，那麼只要對高清屏做下適配就OK啦。

程式碼

// 獲取裝置畫素比
var
 
 PIXEL_RATIO = (function () {
  var ctx = document.createElement('canvas').getContext('2d'),
    dpr = window.devicePixelRatio || 1,
    bsr = ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio || 1
 
;

  return dpr / bsr;
})();

var canvasWidth = 1000,
    canvasHeight = 500;
// 適配高清屏，canvas內容的寬高是實際的寬高的PIXEL_RATIO倍
canvas.width = canvasWidth * PIXEL_RATIO;
canvas.height = canvasHeight * PIXEL_RATIO;
canvas.style.width = canvasWidth + 'px';
canvas.style.height = canvasHeight + 'px';
// 縮放繪圖
context.setTransform(PIXEL_RATIO, 0
 
, 0, PIXEL_RATIO, 0, 0);