使用圖像渲染：像素化； 導致運動圖像波紋垂直像素線

Question

我正在嘗試使用電子在桌面應用程序中創建一個簡單的 javascript 畫布游戲。 我正在使用像素藝術，所以為了讓我的像素藝術圖像在縮放時保持良好的質量，我使用了以下 CSS：

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

不幸的是，當玩家控制主精靈使其左右移動時，一個奇怪的漣漪效應會在精靈移動時移動一條穿過精靈的線。 示例： https : //imgur.com/a/MUCjv4W

如果我只使用清晰的邊緣，這個問題是固定的，但顯然藝術中失去了很多質量。

我能做些什么來防止這種效果並將每個像素保持在正確的位置？

Answer 1

如果您使用這行 JavaScript，您應該能夠刪除所有這些 CSS。 這將禁用圖像的平滑放大並保持像素化質量。

更換context與2D畫布背景。

context.imageSmoothingEnabled = false;