在HTML5 Canvas中分层的最佳方式



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

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

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

该库可让您轻松地对对象进行分组并将它们添加到画布中,它还使添加鼠标侦听器以捕获对对象的单击等变得微不足道,这是在没有库的情况下使用画布时必须编写大量代码来做的事情。

在EaselJS上也有文档和示例。

编辑:

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

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

最新更新