javascript - 使用图像渲染 : pixelated; causes moving image to ripple a vertical pixel line

Question

我正在尝试使用 Electron 在桌面应用程序中创建一个简单的 javascript Canvas 游戏。我正在使用像素艺术，所以为了让我的像素艺术图像在缩放时保持良好的质量，我使用了以下 CSS:

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

不幸的是，当玩家控制主要 Sprite 使其左右移动时，奇怪的涟漪效应会在 Sprite 移动时移动一条穿过 Sprite 的线。
示例: https://imgur.com/a/MUCjv4W

如果我只使用清晰的边缘，这个问题是固定的，但显然很多质量都从艺术中丢失了。

我能做些什么来防止这种影响，并将每个像素保持在正确的位置吗？

Answer 1

如果您使用这行 JavaScript，您应该能够删除所有这些 CSS。这将禁用图像的平滑放大并保持像素化质量。

替换 context使用您的 2D Canvas 上下文。

context.imageSmoothingEnabled = false;