帆布層和遊戲動畫

Question

我想知道如何去做這件事？ 平局，等待1秒 平局2等待1秒 平局3等待1秒。 清晰動畫帆布

現在我假設你已經做到這一點上重疊帆布 所以它不會被我的當前遊戲刷新60個 FPS擦拭。

我也會讓動畫幀成爲一個透明png 所以你可以看到它背後的東西。想想煙霧動畫。

什麼是等待1秒，使用設置間隔或設置超時的最佳方式？ 我已經在我的主要畫布層上使用設置animframerate

我需要知道如何動畫，而其他動畫正在進行，因爲我的頭告訴我畫到屏幕是程序性的，所以如果一個方法被調用來設置動畫一切都停止了，而它變成動畫。

Answer 1

繪製到一個單獨的畫布上是有多層的好辦法，但有幾個方法可以做到你想要什麼：

1. 如果你的PNG圖像是預先定義的，你可以使它直接在context.drawImage()的畫布上。透明度將被保留。只要你的圖像在渲染之前被加載到頁面上，在每一幀重新渲染時都沒有多少開銷。
2. 您可以繪製一個隱藏的畫布，然後將該畫布繪製到主畫布上。您可以通過在JavaScript中創建畫布並從不將其寫入頁面來實現此目的。例如：var layer = document.createElement('canvas');，然後撥打context.drawImage()並將layer作爲參數image。我寫了一個Layer class的實現，您可以使用它來使這更容易。
3. 通過設置圖形上下文對象的globalAlpha屬性，可以使用透明度直接繪製到主畫布上。 （請記住在完成繪製透明內容後將其重新設置爲1）。
4. 您可以繪製到絕對位於主畫布上的輔助可見畫布上。爲此，您需要將副畫布的CSS background-color設置爲transparent。

同樣，有兩個好方法等待1秒鐘：

1. 使用setTimeout或setInterval。這將盡可能接近您的延遲時間（在這種情況下爲一秒），然後異步執行回調。如果您想執行一次操作，則使用setTimeout;如果要無限期（即每秒）以預定義間隔執行操作，則使用setInterval。

2. 保留一個變量，該變量持有您最後一次執行想要運行的函數的時間，並檢查在再次運行代碼之前是否等了足夠長的時間。這將同步運行代碼。例如：

   // Outside of your animation loop 
   var lastRun = Date.now(); 
   // Inside your animation loop 
   if (lastRun + 1000 < Date.now()) { 
       /* Run you callback code */ 
   } 
   

   由於您使用​​來運行你的主動畫循環，這將在最快的時間你的延遲後運行（例如1秒），瀏覽器準備繪製一個新的幀。請注意，如果您希望使用此方法的代碼異步運行，則還可以使用web workers。

除非你正在繪製文本到畫布上沒有緩存，或吸引了成千上萬的對象到你的畫布，機會是非常好的，你的表現是不是畫結合的，所以我甚至會選擇最簡單的解決方案如果它不是異步的。您可以使用stats.js庫來測試畫布的性能。