HTML5畫布使用for循環清除和重繪

Question

我在玩JS，發現了一個小的HTML5游戲教程，我認為修改它很酷。 （這是結果： http : //www.lostdecadegames.com/demos...e_canvas_game/ ）

因此，我做了一點修改，讓for循環繪制背景。 繪圖本身成功了，但是出了點問題。 我發現必須清除畫布並將所有內容重新繪制到每一幀。 我這樣做是這樣的：

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

結果是清除發生在循環完成繪制圖像之前。

周期為：

• 透明帆布
• 用於循環繪制背景圖塊
• 畫些別的東西

不知何故它不輸出背景圖塊...

我在這里包括了修改： http : //jsfiddle.net/swenn/6mWkU/

可能是什么問題？

Answer 1

我發現您的代碼存在問題，繪制地板后沒有將tileY變量設置回零。 這導致畫布將其繪制得越來越遠，例如不在畫布的視區中。

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

工作版本，Webkit

正如我在評論中所寫的那樣，您應該requestAnimationFrame來安排您的繪圖。

您可能還想研究一種繪制地板的更好方法，也許制作一個更大的紋理並僅繪制一次而不是在for循環中繪制。

編輯：修復了jsfiddle鏈接實際上是更新的版本。