在 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。