HTML / Canvas - 另一個畫布的drawImage性能

Question

我正在開發一款游戲，並且使用drawImage將一個畫布繪制到另一個畫布上會遇到一些性能問題。 根據Chrome的Profiler，我只花了60％的時間用於這一次drawImage調用，10％用於它上面的clearRect ...

源畫布現在約為3000x3000（我會說這是非常小的），目標畫布是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環境實現硬件加速之外，我真的不知道該怎么做。 不過，我寧願不做其中任何一個，所以任何輸入都會受到贊賞。

Answer 1

哇，這是一個大型的屏幕外畫布。 緩沖區的存儲空間約為36MB。

我很想使用較小的屏幕外瓷磚，例如1024x124，並在主畫布上繪制可見的瓷磚。 為了節省內存，您最初只能創建可見的圖塊，然后在它們變得可見時生成其他圖塊。 （你可以處理，甚至更好地回收那些不再可見的）。

我不相信這個答案暗示你使用putImageData會提供更好的性能，因為這里提問者的經驗表明： 為什么是putimagedata-so-slow

Answer 2

為每個“精靈”使用getImageData可能會更快，並在Javascript中保持對imageData數組的引用，並使用putImageData渲染到目標畫布。

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