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

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;