在HTML5 Canvas中分层的最佳方式？

Question

如果您需要在HTML5画布上处理不同的图层，那么最好的方法是什么？我看到有些人决定使用position：absolute将多个画布叠加在一起。这是最好的方式吗？

Answer 1

就个人而言，我不会将画布堆叠在一起。画布实际上只是一个显示所需像素的位图，所以在大多数情况下你只需要一个像素。

我建议使用库来帮助您管理不同的对象。我发现格兰特斯金纳的EaselJS是一件轻而易举的事。

这个库让你可以轻松地将对象分组并将它们添加到画布中，这也使得添加鼠标侦听器以捕获对象的点击等变得微不足道。在使用canvas时你需要编写大量代码没有图书馆。

EaselJS也有文档和示例。

编辑：

以下是有关用于分组对象的container的文档摘录。

  

Container是一个可嵌套的显示列表，允许您使用复合显示元素。例如，您可以将arm，leg，torso和head Bitmaps组合到一个Person Container中，并将它们转换为一个组，同时仍然能够将各个部分相对于彼此移动。容器的子容器将其变换和alpha属性与其父容器连接在一起。例如，x = 100且alpha = 0.5的Shape放置在x = 50且alpha = 0.7的Container中，将在x = 150和alpha = 0.35时渲染到画布。容器有一些开销，因此通常不应创建容器来容纳单个子容器。