哪個更快 - 堆疊畫布或像素操作？

Question

我正在使用一些HTML 5功能製作一個小俄羅斯方塊克隆，並且我遇到了一些困難。

我的tetrominos不是由塊組成 - 他們有陰影和陰影，這取決於旋轉，因此每個都是它自己的圖像。這意味着每次遊戲狀態發生變化時，我都無法使用正常的「重繪所有內容」，因爲這意味着要記錄所有的丟棄歷史記錄，並在我想清除一條線時「重播」它。

所以我的選擇是：

1）創建堆疊在彼此的兩個畫布元素。後面的那個是「板子」形象。上面的那個是件帆布，我可以在那裏輕鬆地切片和重新排列。雖然這感覺非常黑客，因爲我想把所有東西放在一個畫布元素中。

2）創建一個「繪圖」上下文和一個「緩衝區」上下文。在緩衝區上下文中，我擁有所有的部分，並且可以自由地操作它，並且當需要將緩衝區繪製到屏幕上時，我會獲取ImageImage，循環遍歷所有像素，然後將它們合成到電路板圖像上。然後我用putImageData將它寫入「繪圖」上下文中。出現這種麻煩是因爲我無法找到一種方法來獲取ImageData結構並將其組合到canvas元素上（可以使用使用drawImage的ImageElements來完成此操作，但drawImage不會使用ImageData結構）。

這兩種解決方案對我來說都不是很優雅。

感謝

Answer 1

沒有什麼 'hackish的' 關於分層畫布。

類似的策略是在許多系統中從舊投幣式遊戲機到現代GPU執行的，通過80年代的8位家用計算機，並且沒有提到經典手繪漫畫（在透明醋酸酯上繪製使用類似的策略技術）。實際上，即使你做了其他類型的操作，很可能你應該做很多原因的分層操作。