禁用使用drawImage和imageSmoothing的Javascript画布不完美像素

我已使用禁用图像平滑

context.imageSmoothingEnabled = false;

如果您看到下图中的橙色对象（使用chrome放大） 您可以看到像素是如何奇怪地对齐的

我可以向您保证，原始图像为8x8，像素位置完美：

我不确定这是禁用图像平滑的结果，还是与画布的分辨率有关。如何使像素保持一致且大小规则

---

现场演示：

您正在将一幅8x8像素的图像绘制到一个20x20的矩形上。这将导致不正确的缩放，因为无法绘制半像素。通过将矩形大小设置为8的倍数或将原始图像的宽度/高度更改为10像素来解决此问题。

能否提供一个实例？我无法复制：@kaido change:ctx.drawImage（这个，0,0,80,80）；到ctx.drawImage（这个，0,0,20,20）；啊。这是因为20/8的比值是2.5，所以最近邻的算法会在半精度出现的地方损坏一个像素。这里有一个更好的质量结果：@kaido谢谢，但我如何修复它，使缩放后的图像看起来与提供的示例相同，其中每个像素看起来都相同？我们将按整数比例缩放图像。将缩放图像大小设置为

16

或

24

即可。