HTML5画布清理和重绘与for循环

HTML5 canvas clearing and redrawing with for loop

本文关键字：for 循环 布清理 HTML5      更新时间：2023-09-26

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

可能是什么问题?

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

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

工作版本，webkit

正如我在评论中所写的，你应该请求animationframe来安排你的绘图。

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

编辑:修正了jsfiddle链接实际上是更新版本

相关文章：