解决 Canvas 在高清屏下绘制图片变模糊

 function setupCanvas(canvas,video) {
     const ctx = canvas.getContext('2d');
   // polyfill 提供了这个方法用来获取设备的 pixel ratio
    var getPixelRatio = function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
    
        return (window.devicePixelRatio || 1) / backingStore;
    };

    var ratio = getPixelRatio(ctx);
     canvas.width = parseInt(video.style.width) * ratio;
     canvas.height = parseInt(video.style.height) * ratio;

     return ctx;
}

假设我们要在 canvas 中绘制一张 300 x 90 的图片，并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180 的图片

上述做了两件事：

一是将 canvas 的高和宽分别乘以 ratio 将其放大，然后又用 CSS 将高和宽限制成初始的大小；

二是 hack canvas 中常用的函数，如：fillRect, clearRect, lineTo, arc (弧) 等，将它们的参数都乘以 ratio，以方便我们可以像以前那样使用这些方法，而不用在传参的时候手动乘以 ratio。