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