在画布上绘制 2 个像素，缩放为 20 个像素，没有模糊或纹理渗色答案

【问题标题】：draw 2 pixels on canvas scaled to 20 pixels with no blur or texture bleeding在画布上绘制 2 个像素，缩放为 20 个像素，没有模糊或纹理渗色
【发布时间】：2020-12-03 19:48:45
【问题描述】：

我在画布上从一个缩放到 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;
}

我看过这个问题，但这对我没有帮助 How Can I Prevent Texture Bleeding When Using drawImage To Draw Multiple Images From A Tile Sheet, Sprite Sheet, Or Texture Atlas?。

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

【问题讨论】：

标签： javascript html

【解决方案1】：

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

【讨论】：