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