javascript 加载的图像模糊 (PNG)

Question

我在 canvas 上为学校项目绘制精灵时遇到问题。我的代码：

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)

Answer 2

如果您在 x=5 和 width = 1 处画一条垂直线，canvas 实际上会画一条从 4.5 到 5.5 的线，这会导致锯齿和模糊线。一种快速补救的方法是在执行其他操作之前将整个 canvas 偏移半个像素。

ctx.translate(-0.5, -0.5);

(documentation)

javascript 加载的图像模糊 (PNG)

javascript loaded image is blurry (PNG)

javascript

canvas

image

image-processing

drawimage