Javascript 画布：SHMUP背景图

我正在使用上面的代码在画布上绘制背景

它工作得很好，除了在绘制新图像时有一个小的延迟。在绘制之前，玩家可以看到背景在顶部一秒钟内没有图像。（这不是我的主要问题，但你也可以帮忙）

不管怎样，现在主要问题是：

我不确定，但我认为当图像移动到画布下方时，它们实际上并没有被删除。。这会不会让比赛慢下来/过一段时间后表现不佳

---

有什么方法可以防止这种情况发生吗？

关于您的第一个问题：if语句应该在调用

drawImage

之前，而不是之后。你也可以用一个模运算来代替它，这个模运算应该保存在所有相关的情况下

bgY += ( enemySpeed + heroSpeed ) / 2;
ctx.drawImage( bg, bgX, bgY - gameHeight );
ctx.drawImage( bg, bgX, bgY );
if( bgY > gameHeight )
{
    bgY = 0;
}

---

你所说的“图像移动到画布下方”或“它们实际上没有被删除”是什么意思？第一行代码“bgY+=（EneySpeed+heroSpeed）/2；”表示bgY点向下移动，这意味着绘制新的背景图像时，它们比以前低。当点位于画布下方时，我将bgY设置为0，这意味着它再次从顶部开始绘制。但是画布下面的图像（那些已经绘制的图像）是，哎呀，仍然在画布下面，它们就是看不见。啊，现在我看到了。绘制图像是优化的（对于画布的任何合理实现），以便在绘制之前根据画布边界剪裁图像。这对性能影响很小，但你看不到（甚至无法测量）。这意味着画布底部下方的图像实际上被“裁剪”掉了？画布外部的图像被裁剪掉了，是的。是的，这有助于临时透明度。谢谢

bgY += ( enemySpeed + heroSpeed ) / 2;
bgY %= gameHeight;
ctx.drawImage( bg, bgX, bgY - gameHeight );
ctx.drawImage( bg, bgX, bgY );