的drawImage（）绘制图像模糊

zoomed

我已阅读本5+其他问题，他们也从我的所有不同，因为我画了多张图片，因为我设置我的画布的宽度和高度在我的HTML而不是我的CSS。

<canvas id="myCanvas" width="480" height="320"></canvas>

这是我怎么画我的图片（我想提出一个棋局）

function piece(color, piece, square, pieceId){ 
    this.dragging=false; 
    this.color=color; 
    this.piece=piece; 
    this.square=square; 
    this.moveCount=0; 
    this.pieceId = pieceId; 
    this.captured = false; 
    this.firstMove; 
    this.xCoord=square.x+(spaceWidth/2-8); 
    this.yCoord=square.y+(spaceHeight/2-8); 
    this.drawPiece = function(){ 
     if (this.color == 'w') { 
      // need to get rid of these magic numbers don't really know what i am doing 
      if (this.piece == 'p') { 
       loadImage("img/whitepawn.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'b') { 
       loadImage("img/whitebishop.png", this.xCoord-4, this.yCoord-3);    } else if (this.piece == 'kn') { 
       loadImage("img/whiteknight.png", this.xCoord-4, this.yCoord-3);    } else if (this.piece == 'r') { 
       loadImage("img/whiterook.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'k') { 
       loadImage("img/whiteking.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'q') { 
       loadImage("img/whitequeen.png", this.xCoord-4, this.yCoord-3);    } 
     } else if (this.color == 'b') { // black piece 
      // need to get rid of these magic numbers don't really know what i am doing 
      if (this.piece == 'p') { 
       loadImage("img/blackpawn.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'b') { 
       loadImage("img/blackbishop.png", this.xCoord-4, this.yCoord-3);    } else if (this.piece == 'kn') { 
       loadImage("img/blackknight.png", this.xCoord-4, this.yCoord-3);    } else if (this.piece == 'r') { 
       loadImage("img/blackrook.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'k') { 
       loadImage("img/blackking.png", this.xCoord-4, this.yCoord-3); 
      } else if (this.piece == 'q') { 
       loadImage("img/blackqueen.png", this.xCoord-4, this.yCoord-3);    } 
     } else { 
      ; 
     } 
    } 
} 

function loadImage(src, x, y) { 
    var imageObj = new Image(); 
    imageObj.src = src; 
    imageObj.onload = function() { 
     ctx.imageSmoothingEnabled = false; 
     ctx.drawImage(imageObj, x, y, 25, 25); 
    }; 
}

有谁知道我做错了吗？我一直试图弄清楚这一点，并可以使用一些帮助。

来源

2017-04-07 Kyle O' Connor

你能提供一个[mcve]，例如只有这些图像中的一个吗？（你可以在stackoverflow的imgur账户上上传它）。在哪个浏览器中你会遇到这个问题（有些仍然有一个前缀版本的imageSmoothingEnabled。 – Kaiido

有没有办法让图像文件img/*。png被显示，以便我可以在我的笔记本电脑上测试这个？ – WeHumLove

是的，让我试着弄清楚如何做imgur的事情，也是我使用chrome。只是在Safari浏览器尝试过，它仍然看起来不好，虽然 –

您的问题可能来自于绘制图像时浏览器执行的插值。

不幸的是，没有任何标准的方法可以撤销这个。

下面是一些可能有用的线索一个问题： Disable Interpolation when Scaling a <canvas>

更简单的，丑陋的修复可能是使用更高的分辨率imagaes（在你喜欢的图片处理工具加以推广，并选择最接近的为插值设定）。

来源

2017-04-10 13:13:30

的drawImage（）绘制图像模糊

回答

相关问题