html5 canvas绘制图片模糊的问题

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

阅读 28.1k
评论
    4 个回答

    用了@KevinYue 的例子,感觉不是很好使,我现在的解决方案,不管当前的devicePixelRatio的值是多少,统一将canvasDOM节点的width属性设置为其csswidth属性的两倍,同理将height属性也设置为cssheight属性的两倍,即:

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

    这样整个canvas的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐标系来显示,不清晰的问题就得以改善了。

      • 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参见这里,请在手机中打开查看效果。

        • 1.1k
        //绘制图片
                    var images=new Array(8);
                    var imagesSrc=new Array(8);
                    for(var i = 0, dlen = data.length; i < dlen; i++){
                        images[i]=new Image();
                        imagesSrc[i] = data[i].img;
                        //console.log(images[i]);
                    }
                    var rx = centerx, ry = centery; 
                    var px = 0, py = 90; 
                    var radius = ry - py;
        
                    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);
                    //100积分
                    images[0].onload = function() { 
                        var angle = (40+0*45) * Math.PI / 180; 
                        var dx = rx + radius * Math.sin(angle); 
                        var dy = ry - radius * Math.cos(angle); 
                        ctx.save();
                        ctx.translate(dx, dy);
                        ctx.rotate(angle);
                        ctx.translate(-dx, -dy);
        
                        // var imagesOne = images[0].src;
                        // initImages(ctx,imagesOne);
        
                        ctx.drawImage(images[0],dx - images[0].width / 2,dy - images[0].height/2,(images[0].width)*ratio,
                        (images[0].height/2))*ratio;
                        ctx.restore();
                    }
                    images[0].src = imagesSrc[0];
        

        @KevinYue 看这里

          • 0
          • 新人请关照

          先放大 canvas,再用 CSS 将其限制回原始大小

          该答案已被忽略,原因:

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章