解决img绘制到canvas不清晰的方法

    <script src="./js/hidip-canvas-polyfill.js"></script>


      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');

      getPixelRatio (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);
     

      ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
    

  

这个博主写的比较清晰：https://segmentfault.com/a/1190000003730246

这个方法试了一下。我的图片显示的有问题，绘制太多内容，渲染速度慢。；

 

这个方法最简单：

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>