HTML/Canvas - 使用另一個畫布繪製圖像性能

我正在製作遊戲，並且出現了一些使用drawImage將一個畫布繪製到另一個畫布上的性能問題。根據Chrome的Profiler，我花了60％的時間在這一個drawImage調用和10％的clearRect上面...HTML/Canvas - 使用另一個畫布繪製圖像性能

目前的源畫布大約是3000x3000（這是相當小的，我'd說），目標畫布是1024x768。

我認爲，不是繪製所有的瓷磚;牆壁等等每個循環（這給我15fps左右），它可能會更快地將它們全部繪製到屏幕外的畫布上，然後將其繪製到我的主畫布上，然後在頂部繪製實體等。這給了我〜30fps，但是......這是我用軟件渲染獲得的最好效果嗎？

我的渲染循環基本上是：

ctx.clearRect(0, 0, 1024, 768); 

ctx.beginPath(); 
ctx.drawImage(map, cam.position.i, cam.position.j, 1024, 768, 0, 0, 1024, 768); 
ctx.closePath(); 

ctx.save(); 
ctx.translate(-cam.position.i, -cam.position.j); 
// draw entities, etc. 
ctx.restore();

我真的不能相信的事，除了開始使用的WebGL（以利用其硬件加速）或等待供應商來實現硬件加速2d上下文。儘管如此，我寧願不做這些，所以任何輸入都將不勝感激。

來源

2010-10-19 Xavura

我不知道beginPath方法和closePath適用的drawImage。 – kanaka 2010-10-19 16:32:26

啊，我一直在用lineTo/moveTo和drawImage的路徑。我剛剛刪除它們，幀速率大致相同，但無論如何感謝。 – Xavura 2010-10-19 16:43:37

3000x3000是龐大的，即使是1024x768在軟件渲染方面已經很慢了，或者它耗盡了所有可以獲得的CPU，根據我的經驗，在硬件加速到達所有終端之前，沒有多少可做。儘管如此，您可能會考慮使用基於HTML的方法來製作基於圖塊的遊戲。 – 2010-10-19 17:04:04

對每個「精靈」使用getImageData並在Javascript中保留對imageData數組的引用並使用putImageData呈現給目標畫布可能會更快。

您仍然可以使用不可見源代碼畫布和每個tile/sprites上的getImageData來渲染您的精靈。它會使用更多的內存，但可能比使用源和目標畫布的drawImage更快。

來源

2010-10-19 16:29:38 kanaka

哇，這是一個大屏幕外屏。僅用於緩衝區的存儲大約爲36MB。

我會試圖使用更小的離屏瓷磚，例如， 1024x124並在主畫布上繪製可見的部分。爲了節省內存，您最初只能創建可見的圖塊，然後在可見時生成其他圖塊。（你可以處理，甚至更好的回收那些不再可見的）。

我不相信答案建議你使用putImageData將提供更好的性能，因爲在這裏提問的經驗表明：why-is-putimagedata-so-slow

來源

2010-10-19 16:35:26 andrewmu

HTML/Canvas - 使用另一個畫布繪製圖像性能

回答

相關問題