HTML5 Canvas最佳图层方式是什么？

Question

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

- Andrew Howard

Answer 1

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

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

该库让您轻松地对对象进行分组并将它们添加到画布中，还可以轻松地添加鼠标侦听器以捕获对象上的点击等操作，这是在没有库的情况下使用画布时需要编写大量代码才能完成的事情。 EaselJS上也有文档和示例。

编辑：

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

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

- Neil

---

很棒的见解，我一直在使用EaselJS，但我不知道分组这个术语。谢谢，我会进一步了解它。 - Andrew Howard