在 canvas 上绘制 2 个像素，缩放为 20 个像素，没有模糊或纹理溢出

Question

我从 canvas 上放大到 20 像素的 spritesheet 中绘制了两个像素。 但是像素变得平滑并且看起来模糊。 我想要清晰的像素完美缩放，没有模糊。

这是我的代码：

let canvas = document.createElement('canvas');

canvas.width = 320;
canvas.height = 180;

canvas.style.width = '1024px';
canvas.style.height = '1024px';

ctx.imageSmoothingEnabled = false;

ctx.drawImage(241, 16, 2, 2, 8, 0, 20, 20);

// stylesheet
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

我已经看到了这个问题，但这对我没有帮助当使用 drawImage 从平铺表、精灵表或纹理图集绘制多个图像时，如何防止纹理出血？ .

这是我的精灵表和生成的图像：

Answer 1

调整 canvas 的大小后，我必须将imageSmoothingEnabled设置为 false。