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

Question

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

Answer 1

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

我建议使用库来帮助您管理不同的对象。我发现使用 Grant Skinner 的EaselJS是一件轻而易举的事。

这个库让您可以轻松地对对象进行分组并将它们添加到画布中，它还可以轻松添加鼠标侦听器以捕获对对象的点击等。这是在没有库的情况下使用画布时必须编写大量代码才能完成的事情.

EaselJS上也有文档和示例。

编辑 ：

container这是有关用于对对象进行分组的文档的摘录。

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