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

时间:2011-10-21 02:39:45

标签: javascript html5 canvas pixel-manipulation

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

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

所以我的选择是:

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

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

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

由于

1 个答案:

答案 0 :(得分:1)

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

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

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