canvas模糊問題

用canvas繪圖時，繪製的圖形出現了明顯鋸齒

正常預覽圖片

用drawImage繪製在canvas上的圖片

出現緣由

圖片都是經過像素組成的，通常的1px就是1像素，可是不一樣屏幕， css像素和物理像素並非1:1的關係
經過 window.devicePixelRatio 查看，由於渲染比不一樣，致使圖像在屏幕上的輸出也不一樣，就是1像素並非1px，致使圖片模糊的問題

解決方案

先將canvas放大 window.devicePixelRatio 倍,渲染圖片canvas就和屏幕的像素比就是1:1了，再經過css將放大的canvas縮放回原來的大小

參考文章 《記一次高分屏下canvas模糊問題》

代碼實現

// 獲取設備像素比
const getPixelRatio = context => {
    // backingStore 獲取瀏覽器像素和真實像素比
    // 這個屬性大部分瀏覽器都已廢棄
    const backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
    return (window.devicePixelRatio || 1) / backingStore;
};

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

const ratio = getPixelRatio(ctx);

canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;

canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';

const img = new Image()
img.onload = function () {
    ctx.drawImage(img, 0, 0, 500, 500);
}
img.src = './static/canvas.png';

參考文章

《Window.devicePixelRatio》
《High DPI Canvas 高分辨率Canvas（譯）》
hidpi-canvas-polyfill