HTML5畫布清除和重畫for循環

我在玩JS，發現一個小型的HTML5遊戲教程，我認爲這將是很酷的修改。（這是結果：http://www.lostdecadegames.com/demos...e_canvas_game/）HTML5畫布清除和重畫for循環

所以我修改它只是一點點，讓循環繪製背景。繪圖本身是成功的，但它有一些問題。我發現我必須清除畫布並重新繪製每一幀的所有內容。我這樣做：

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

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

週期爲：

明確帆布
for循環繪製背景磚
畫別的東西

不知怎的，它不輸出背景磚...

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

可能是什麼問題？

來源

2013-05-12 swenn

我無法找到您的畫布清理方法？對於您的運行循環，最好嘗試使用[requestAnimationFrame]（https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame）。我認爲更新的1毫秒延遲可能是您的問題的一部分。 – 2013-05-12 20:57:19

我發現你的代碼存在問題，你在繪製地板後沒有將tileY變量設置回零。這會導致畫布進一步向下繪製，例如不在畫布的視圖空間中。

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

Working version, webkit

正如我在評論中寫道，你應該requestAnimationFrame安排您的圖紙。

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

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

來源

2013-05-12 21:06:20

如果我每次將tileY設置爲0，那麼它只繪製第一行，不是嗎？關於循環：其中有2個。一個用於Y，另一個用於X.我讓它們都循環10次，所以Y不能永遠循環。此外，包含的鏈接似乎與我的相同。 – swenn 2013-05-12 21:29:49

是的，如果在第一個for循環結束時執行它，但您應該在第一個for循環開始之前將其設置。在渲染函數的頂部。 – 2013-05-12 21:31:43

它們在代碼的上半部分實際上都設置爲0。 – swenn 2013-05-12 21:33:13

HTML5畫布清除和重畫for循環

回答

相關問題