将canvas-sprite对象添加到画布？

Question

我一直在玩HTML5，画布和精灵，我设法让自己有点难过。我很奇怪是否有人在那里只有比我更多的经验可以帮助我'调整'这个（并且也使它工作）。

我已经在GitHub https://github.com/AlexChesser/jsSprite上获得了所有代码并在此处进行了现场演示http://chesser.ca/jsSprite

你可以从Test 01和02看到的是我能够将Minotaur直接发送到页面画布上，我能够在画布上为Minotaur制作动画......但是当我尝试创建时牛头怪并将其添加到另一个画布 - 我得到一个空白的屏幕。

（尝试实施https://github.com/AlexChesser/jsSprite/blob/master/03-animated_minotaur_on_canvas.php）

我知道这一定是一件小事，我在这里做错了，但我已经盯着它好几个小时，我无法追查问题。

我以为我会尝试在这里张贴，看看是否有人能够一次性看到它和，或许让我知道是否有什么我可以做得更好。

如果您有兴趣进一步了解这些内容，那么代码的大部分来自博客文章http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/

无论如何，一旦你离开问题一点点，也许这就是“来找你”的事情之一。手指交叉我可以弄清楚，或者有人可以向我推进正确的方向。

谢谢！ ：）

Answer 1

我刚刚完成了你的代码。

MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);

在调用drawFrame之前发生，因为图像还没有准备好。

因此mainContext.drawImage正在绘制一个尚未绘制任何内容的画布。

然后Sprite的画布已经加载并准备好了，但为时已晚！

要进行确认，您可以在浏览器控制台中拨打MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);，然后您就会看到牛头人了。

Answer 2

正如Simon Sarris所说，你过早地画画布。你需要做的是循环直到精灵准备好，或者在你绘制的精灵之后添加一个回调。

你已经有一个附加到图像的onload事件的函数，你可以为整个精灵做类似的事情。