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

Question

如果你需要在HTML5画布上的不同层上工作,最好的方法是什么？我看到有些人决定使用position:absolute将多个画布叠加在一起.这是最好的方法吗？

Answer 1

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

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

这个库可以让你轻松地对对象进行分组并将它们添加到画布上，它还使得添加鼠标侦听器来捕获对象上的点击等变得很简单。在没有库的情况下使用画布时，你必须编写大量代码才能完成此操作。

还有关于EaselJS的文档和示例。

编辑 ：

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

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