使用图像渲染：像素化；导致运动图像波纹垂直像素线

Question

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

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

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

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

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

Answer 1

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

用您的 2D 画布上下文替换 context。

context.imageSmoothingEnabled = false;