drawImage()渲染模糊图像

Question

​

​

​

​

我读过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);
    };
}

有人知道我做错了什么吗？我一整天都在努力解决这个问题，我需要一些帮助。

Answer 1

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

不幸的是，没有标准的方法来撤销这一点。

这里有一个问题，其中可能有一些有用的线索：Disable Interpolation when Scaling a

一个更简单，更丑陋的修复方法可能是使用更高分辨率的图像(在你最喜欢的图像处理工具中放大它们，并选择最近作为插值设置)。