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

Question

我已使用

禁用了图像平滑功能

context.imageSmoothingEnabled = false;

如果你看下图中的橙色物体（用铬放大） 你可以看到像素是如何奇怪对齐的。

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

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

现场演示：https://jsfiddle.net/khjnqLjo/1/

Answer 1

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