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

Question

我已使用禁用图像平滑

context.imageSmoothingEnabled = false;

如果你看下图中的橙色物体(用 Chrome 放大) 你可以看到像素是如何奇怪地对齐的。

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

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

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

Answer 1

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