javascript 加载的图像模糊 (PNG)

Question

我在为学校项目在 Canvas 上绘制 Sprite 时遇到问题。我的代码:

treeImage = new Image();
treeImage.src = "sprites/treeSprites.png"; 

function rocks() { //to create the rock
  this.x = 1920 * Math.random(); //random location on the width of the field
  this.y = ground[Math.round(this.x/3)]; //ground is an array that stores the height of the ground
  this.draw = function() {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(Math.tan((ground[Math.floor(this.x/3)]-ground[Math.floor(this.x/3)+1])/-3));
        //^rotating based on its position on the ground^
    ctx.drawImage(treeImage, 200, 50, 50, 50, -25, -50, 50, 50);
    ctx.restore();
  }
}

len = rockArray.length; //every frame
for (var i = 0;i<len;i++) {
  rockArray[i].draw();
}

我只请求图像的 50×50px。正好在 50×50 之外有黑线(这不应该干扰，因为我只要求黑线内的正方形)，但是当我绘制岩石时，黑色轮廓是可见的。 (由于其他原因，我无法删除黑线。)

我猜测当我加载图像时JavaScript存储的图像变得模糊，然后当我从图像中请求该部分时，周围的线条也可见，因为模糊将线条“传播”到正方形中我请求。

有什么办法可以防止这种情况发生吗？

Answer 1

使用ctx.imageSmoothingEnabled = false。

这将使图像变得清晰而不是平滑(模糊)。

(documentation)