哪个更快 - 堆叠画布或像素操作？

Question

我正在使用一些HTML 5功能制作一个小的俄罗斯方块克隆，而且我有点陷入两难境地。

我的tetrominos不是由块组成 - 它们具有依赖于旋转的阴影和阴影，因此每个都是它自己的图像。这意味着每次游戏状态发生变化时我都无法使用正常的“重绘所有内容”，因为这意味着要跟踪所有片段丢弃历史记录，并在我想清除一条线时“重播”它。

所以我的选择是：

1）创建两个相互堆叠的画布元素。背面的那个是“板”图像。顶部的那个是碎片帆布，我可以在那里轻松切片和重新排列。这感觉非常黑，因为我想把所有东西放在一个画布元素中。

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

这两种解决方案对我来说都不是很优雅。

由于

Answer 1

对于分层画布没有任何“束缚”。

在许多系统中，从旧的投币式游戏机到现代GPU，通过80年代的8位家用电脑进行了类似的策略，并且没有提到经典的手绘漫画（使用类似技术在透明醋酸纤维上绘制） ）。

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