32x32 图像在缩放时变得模糊

Question

我正在通过裁剪 spritesheet 图像制作 32x32 的精灵以显示在 canvas 中。它出来的时候很小，所以我按一些数字缩放它。令我惊讶的是，图像变得怪异和模糊。我要像素化。

ctx.drawImage(spritesheet,0,0, 32,32, 0,0, 32*6,32*6);

上面的代码原来是这样的。 http://i.imgur.com/2Eg1cxS.png（post 张图片没有足够的代表。）

图像的涂鸦结果不是很清晰，而是很模糊。

有没有一种方法可以在图像变得清晰时缩放图像？

http://jsfiddle.net/njuay867/

Answer 1

如果关闭图像平滑，您可以获得更清晰的图像：

// turn off automatic image smoothing
ctx.ImageSmoothingEnabled = false;

这是示例代码和演示：

var ctx = document.getElementById('foo').getContext('2d');

var temp;
function init() {
  temp = new Image();
  temp.src='https://raw.githubusercontent.com/Setriox/Science-Fair-Project/master/Spritesheet.jpg';

  temp.addEventListener("load", function() {

    // turn off automatic image smoothing
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;  
    
    
    ctx.drawImage(temp,0,0, 32,32, 0,0, 32*2,32*2);
  }, false);

}

init();

<canvas id=foo></canvas>

32x32 图像在缩放时变得模糊

32x32 Image comes out blurry when scaled

javascript

image

html5-canvas