2

我在玩 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/

可能是什么问题？

4

1 回答 1

1

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

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

工作版，webkit

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

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

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

于 2013-05-12T21:06:20.377 回答