Question

unzoomed

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

有谁知道我做错了什么？我一直试图弄明白这一点，并且可以使用一些帮助。

Answer 1

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

不幸的是，没有任何标准的撤消方法。

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

更简单，更丑陋的修复可能是使用更高分辨率的imaga（在您喜欢的图像处理工具中将它们放大并选择最接近的插值设置）。

drawImage（）渲染模糊图像

1 个答案: