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

Question

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

Answer 1

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

我建议使用库来帮助您管理不同的对象。我发现 Grant Skinner 的 EaselJS 很容易使用。

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

EaselJS 上也有文档和示例。

编辑：

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

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