Javascript HTML5画布清除和重绘for循环

我在玩JS，发现了一个小的HTML5游戏教程，我认为修改它会很酷。（这是结果：）

所以我稍微修改了一下，让for循环绘制背景。这幅画本身成功了，但有点不对劲。 我发现我必须清理画布并重新绘制每一帧的所有内容。我是这样做的：

ctx.clearRect(0,0,canvas.width,canvas.height);

结果是，清除发生在循环完成绘制图像之前

这个周期是：

• 透明帆布
• 用于循环绘制背景平铺
• 画点别的

不知怎的，它没有输出背景平铺

我在这里包括了我的修改：

---

可能有什么问题？

我发现您的代码有问题，在绘制地板后，您没有将tileY变量设置回零。这会导致画布越来越向下绘制，例如不在画布的视图空间中

//Start of your render function.
tileY = 0;
tileX = 0;

正如我在评论中所写，你应该安排你的绘画

你可能还想寻找一种更好的方法来绘制地板，也许制作一个更大的纹理，只绘制一次，而不是在for循环中

---

编辑：修复了JSFIDLE链接，使其实际成为更新版本。

我找不到您的画布清除方法？对于您的跑步循环，最好尝试使用。我想更新延迟1毫秒可能是你的问题的一部分。如果我每次都将tileY设置为0，那么它只绘制第一行，不是吗？关于循环：有两个循环。一个代表Y，另一个代表X。我让它们都循环10次，所以Y不能永远循环。此外，包含的链接似乎与我的链接相同。如果在第一个for循环结束时进行设置，则是的，但应该在第一个for循环开始之前进行设置。在渲染函数的顶部。在代码的上半部分，它们实际上都设置为0。代码的上半部分只运行一次，每次渲染函数运行时都需要设置它，因为clearRect方法会清除所有内容，包括地板。看看我更新的小提琴。我现在明白了。谢谢你的帮助。：）