html5 canvas绘制图片模糊的问题

我遇到一个问题,用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的,求高手指点。

阅读 25k
评论 2014-11-26 提问
    4 个回答
    KevinYue
    • 5.2k

    我整理了一篇博客放在了这里,请移步。

    不光绘制图片,在高分屏下,绘制文字和线条都会出现模糊的现象,具体的原因可以参考这里
    GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题,但是没有对图片进行处理。如果你了解了原因,解决这个问题也很容易。

    首先,引入上方这个polyfill;
    然后,得到devicePixelRatiobackingStorePixelRatio的比例,可以使用下面的方法:

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

    之后,在调用ctx.drawImage()的时候,给widthheight乘以ratio,如下:

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

    完整的deom参见这里,请在手机中打开查看效果。

    评论 赞赏 2015-09-10