使用 for 循环清除和重绘 HTML5 画布

Question

我在玩 JS，发现了一个小的 HTML5 游戏教程，我认为修改它会很酷。 （这是结果：http://www.lostdecadegames.com/demos...e_canvas_game/）

所以我稍微修改了一下，让 for 循环绘制背景。绘图本身成功，但它有问题。 我发现我必须清除画布并将所有内容重绘到每一帧。我是这样做的：

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

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

循环是：

• 透明帆布
• for 循环绘制背景图块
• 画别的东西

不知何故，它不输出背景图块...

我在这里包含了我的修改： http://jsfiddle.net/swenn/6mWkU/

可能是什么问题？

Answer 1

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

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

Working version, webkit

正如我在评论中所写，您应该 requestAnimationFrame 安排您的绘图。

您可能还想研究一种更好的绘制地板的方法，也许制作一个更大的纹理并只绘制一次而不是在 for 循环中。

编辑：将 jsfiddle 链接修复为实际上是更新版本。