Javascript 哪一个更快——堆叠画布还是像素操作？

我正在使用HTML5的一些特性制作一个俄罗斯方块的小克隆，现在我有点进退两难了

我的tetrominos不是由块组成的——它们有依赖于旋转的阴影和阴影，因此每个都是自己的图像。这意味着我不能在每次游戏状态改变时使用正常的“重画一切”，因为这意味着要跟踪所有的棋子掉落历史，并在我想清除一条线时“重画”它

因此，我的选择是：

1） 创建两个堆叠在一起的画布元素。背面的是“电路板”图像。最上面的是碎片画布，在那里我可以轻松地切片和重新排列东西。但这感觉非常粗糙，因为我想将所有内容都保存在一个画布元素中

2） 创建“绘图”上下文和“缓冲区”上下文。在缓冲区上下文中，我拥有所有的块，可以自由地操作它，当需要将缓冲区绘制到屏幕上时，我获取ImageData，循环所有像素，并将它们合成到电路板图像上。然后我用putImageData将其写入“绘图”上下文。出现这种麻烦是因为我找不到一种方法来获取ImageData结构并将其合成到画布元素上（您可以使用drawImage使用ImageElements来实现这一点，但drawImage不会获取ImageData结构）

这两种解决方案在我看来都不是很优雅

---

谢谢

分层画布没有什么“黑”的

在许多系统中，从老式的投币式控制台到现代的GPU，在80年代的8位家用计算机上都可以执行类似的策略，而这还没有提到经典的手绘卡通（这些卡通是在透明的醋酸纤维上绘制的，使用了类似的技术）

---

事实上，即使你做了其他类型的操作，你也很可能因为很多原因需要进行分层处理。

分层画布没有什么“黑客”的意思

在许多系统中，从老式的投币式控制台到现代的GPU，在80年代的8位家用计算机上都可以执行类似的策略，而这还没有提到经典的手绘卡通（这些卡通是在透明的醋酸纤维上绘制的，使用了类似的技术）

---

事实上，即使你做了其他类型的操作，出于很多原因，你也很可能需要进行分层。

考虑使用Easeljs。Easeljs缓存显示列表，以便仅重新渲染已失效的分支。所有其他位图都绘制为一个位图（非常快）；然而，即使有了这个特性，分层画布也是分发渲染负载的最好方式。Easeljs缓存显示列表，以便仅重新渲染已失效的分支。所有其他位图都绘制为一个位图（非常快）；但是，即使使用该功能，分层画布也是分配渲染负载的最佳方式。