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

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

分析

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

解決方法

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

代碼

pdf.js的解決方案詳見 https://github.com/lwenn/pdf-viewer-easy

// 獲取設備像素比 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);

總結

以上是生活随笔為你收集整理的canvas绘图在高清屏显示模糊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。