canvas圖片、文字在移動端顯示模糊問題

因為 canvas 不是向量圖，而是像圖片一樣是點陣圖模式的。高 dpi 顯示裝置意味著每平方英寸有更多的畫素。也就是說二倍屏，瀏覽器就會以2個畫素點的寬度來渲染一個畫素，該 canvas 在 Retina 螢幕下相當於佔據了2倍的空間，相當於圖片被放大了一倍，因此繪製出來的圖片文字等會變模糊。因此，要做 Retina 屏適配，關鍵是知道當前螢幕的裝置畫素比，然後將 canvas 放大到該裝置畫素比來繪製，然後將 canvas 壓縮到一倍來展示。

const canvas = document.getElementById('canvasBox'
 
)
const dpr = window.devicePixelRatio; // 假設dpr為2
const ctx = canvas.getContext('2d')

// 獲取css的寬高
const { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根據dpr，擴大canvas畫布的畫素，使1個canvas畫素和1個物理畫素相等
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

注意： canvas.style.width 和 canvas.style.height  有些博主是直接取canvas.width 和canvas.height, 但是這樣會出現高度寬度比例失衡問題；不知道是不是還有其他配置，暫且不談，會的小夥伴可以分享一下 

canvas.width 
 
= Math.round(dpr * cssWidth);
canvas.height = Math.round(dpr * cssHeight);
// 由於畫布擴大，canvas的座標系也跟著擴大，如果按照原先的座標系繪圖內容會縮小
// 所以需要將繪製比例放大
ctx.scale(dpr, dpr);