javascript加载的图像模糊（PNG） [英] javascript loaded image is blurry (PNG)

问题描述

我正在做一个学校项目（只有几个月的JS知识），但在画布上绘制精灵时偶然发现了这个问题。
要绘制，我使用这些代码。

I am working on a school project (only couple months of JS knowledge), and i stumbled upon this problem with drawing sprites on my canvas. To draw i use these bits of code.

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 x 50正如您在下图中所看到的，这50 x 50是我正确绘制的（据我所知），但是恰好在50 x 50之外有黑线，不应干涉，因为我只要求黑色线条内的正方形。但是当我画岩石时，黑色轮廓是可见的。 （假设我由于过于详细的原因无法删除黑线）

as you can see i only request a 50 by 50 from the image, and this 50 by 50 as you can see in the image below, is drawn correctly by me (for as far as i know), but exactly outside of the 50 by 50 there are black lines, which shouldn't interfere because i only request the square within the black lines. but when i draw the rock, the black outlines are visible. (assume i cant remove the black lines for too detailed reasons)

证明它确实是50x50，以及它在我的画布上的外观

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

what i am guessing is that the image JavaScript stores when i load the image is made blurry, and then when i request that part from the image, the lines around are visible too, as the blur "spread" the lines into the square i request.

是这种情况吗？有什么办法可以防止这种情况吗？或另一种方法来解决这个问题？
是因为我知道人们已经在画布上制作了像素艺术游戏，所以他们的图像一点也不模糊。

is this the case? is there a way i can prevent this? or maybe another way to solve this? because i know people have made pixel art games within canvas, and their images arent blurry at all so to say.

推荐答案

使用 canvas.imageSmoothingEnabled = false 。

这将使图像清晰而不是模糊。

This will make the image sharp instead of blurry.

https： //developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

这篇关于javascript加载的图像模糊（PNG）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！