html5 canvas绘制图片模糊的问题

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

阅读 28.1k
评论
    4 个回答
    • 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 看这里

      相似问题
      推荐文章