使用多个HTML5画布来分层图像

Question

我不久前创建了一个基于Web的游戏引擎，但主要使用jQuery来处理精灵和动画，现在我通过将游戏画布移动到HTML5来学习HTML5的强大功能。所以这是我遇到的问题：我正在使用http://html5.litten.com/layers/canvaslayers.html建议的多画布来分层图像。

这对我不起作用，即使我将z-index设置为999999：这是我的代码 - ＆gt;

http://snipt.org/xoKn

对象图层不在图块的顶部，谢谢！

Answer 1

代码应该起作用（至少是画布处理部分）。我看了你的脚本，加载图片可能有问题。

var tile = new Image();
tile.src = tiles[i]['bg'];
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);

但由于尚未加载图片，因此无效。相反，你应该使用

tile.onload = function(){
  tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);
}

或类似的东西（即你不会引用i变量，因此需要修改它。）

请注意，在教程中，他们使用setInterval(drawAll, 20);使其在一段时间后工作（因为一段时间后将加载所有图像）。

当然你可能会丢失图像的排序（虽然这似乎并不重要），所以preloading所有图像在开始时然后一次性绘制它们是一个好主意。尝试一下，如果有效的话，现在让我们来吧！

Answer 2

如果有人遇到类似的问题，我设法通过首先加载第一层然后最后加载最低层来解决这个问题。显然，似乎首先加载的任何内容都将位于顶部。

所以我的解决方案是将m个对象循环移动到我的tile循环之上。对我很有意思，不知道首先加载什么是重要的。