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

Question

我已使用禁用圖像平滑

context.imageSmoothingEnabled = false;

如果您看下面圖像中的橙色對象（用chrome放大），您會看到像素是如何奇怪地對齊的。

我可以向您保證，原始圖像是像素完美放置的8x8：

我不確定這是由於禁用圖像平滑還是與畫布的分辨率有關。 如何使像素一致且尺寸固定？

現場演示： https : //jsfiddle.net/khjnqLjo/1/

Answer 1

您正在將8x8像素的圖像繪制為20x20的矩形。 這將導致縮放錯誤，因為您無法繪制半像素。 通過將矩形大小設置為八的倍數來解決此問題，或者將原始圖像的寬度/高度更改為10像素。