在HTML5 Canvas中分层的最佳方法是什么？

Question

如果您需要在HTML5画布的不同图层上工作，最好的方法是什么？我看到一些人决定使用position：absolute来堆叠多个画布。这是最好的方法吗？

Answer 1

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

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

这个库允许您轻松地将对象分组并将它们添加到画布中，它还使得添加鼠标侦听器来捕获对象上的点击等操作变得微不足道，这是您在使用时必须编写大量代码没有图书馆的画布。

还有EaselJS的文档和示例。

编辑：

这里是关于用于对对象进行分组的container的文档的提取物。

A Container是一个可嵌套的显示列表，允许您使用复合显示元素。例如，您可以将手臂，腿部，躯干和头部位图组合在一起，形成一个人物容器，并将它们转换为一组，同时仍然可以将各个部分相对移动。容器的子项将其变换和alpha属性与其父容器连接起来。例如，放置在x = 50和alpha = 0.7的Container中的x = 100和alpha = 0.5的Shape将在x = 150和alpha = 0.35处呈现到画布。容器有一些开销，所以你通常不应该创建一个Container来容纳一个孩子。