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

Question

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

Answer 1

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

我建议使用库来帮助您管理不同的对象。我发现 Grant Skinner 的 EaselJS工作起来轻而易举。

这个库可以让你轻松地对对象进行分组并将它们添加到 Canvas 上，它也使得添加鼠标监听器来捕获对象上的点击等变得微不足道。使用 Canvas 时你必须编写大量代码才能做到这一点没有图书馆。

EaselJS 上有文档和示例还有。

编辑:

这里是关于用于对对象进行分组的容器的文档的摘录。

A Container is a nestable display lists that allows you to work with compound display elements. For example you could group arm, leg, torso and head Bitmaps together into a Person Container, and transform them as a group, while still being able to move the individual parts relative to each other. Children of containers have their transform and alpha properties concatenated with their parent Container. For example, a Shape with x=100 and alpha=0.5, placed in a Container with x=50 and alpha=0.7 will be rendered to the canvas at x=150 and alpha=0.35. Containers have some overhead, so you generally shouldn't create a Container to hold a single child.