32x32 缩放时图像模糊

32x32 Image comes out blurry when scaled

本文关键字：模糊 图像 缩放 32x32      更新时间：2023-09-26

我正在通过裁剪精灵表图像来制作要在画布中显示的 32x32 精灵。它很小，所以我按一些数字缩放它。令我惊讶的是，图像变得奇怪和模糊。我想被像素化。

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

上面的代码原来是这样的。 https://i.stack.imgur.com/FNqEj.png（没有足够的代表来发布图像。

图像的涂鸦结果不是锐利的，而是模糊的。

有没有办法在图像变得清晰时缩放图像？

http://jsfiddle.net/njuay867/

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

// 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>

相关文章：