Javascript 画布drawImage不'；不要第一次画图像

我正在使用HTML5画布开发一个简单的JavaScript游戏。这是一个非常典型的游戏循环设置，包括：

• init（）函数，用于初始化要在运动场中使用的对象，将一些开始x/y位置和类似的设置任务随机化
• 函数，用于绘制所有游戏对象，包括一些简单的画布形状和一些图像
• 设置每隔25毫秒调用draw的间隔

在开始这个项目的时候，我在init（）函数的末尾调用了setInterval，所以它会在加载页面后立即开始绘图和设置动画，一切正常。现在，我想进一步绘制一个完全填充的静态加载游戏场，然后使用按钮启动主循环间隔。因此，我在init（）的末尾添加了一个对draw（）的调用，问题是当我这样做时，所有画布形状都正确绘制，但没有一个图像在画布上渲染

如果我让draw（）运行几次，它们就会进行渲染，比如

    var previewDraw = setInterval(draw, 25);
    var stopPreviewDraw = function() { clearInterval(previewDraw) }
    setTimeout(stopPreviewDraw, 100)

……但这似乎很愚蠢。为什么对draw（）的单个调用不起作用？我已经在Chrome和Firefox的控制台上记录了这些对象，它们的一切看起来都很好；它们已经有了适当的img src路径和起始x/y值，可用于传递以分配给创建的新映像（），然后通过my canvas.2dcontext.drawImage（）方法调用该映像

我正在Chrome 6和Firefox 3.6.10中测试这一点，他们的行为让我感到困惑。Chrome的控制台中没有显示错误或问题，但如果我仅在Firefox抛出以下命令时尝试调用draw（）：

未捕获异常：[异常…”组件返回故障代码：0x80040111（NS_错误\u不可用）[nsIDOMCanvasRenderingContext2D.drawImage]“nsresult:“0x80040111（NS_错误\u不可用）”位置：“JS帧：：：drawItem:：line 317”数据：否]

---

我在谷歌搜索该错误时发现一个损坏的图像，但它们都在预览和Photoshop中打开，没有任何问题。

我假设您在触发窗口对象的onload事件后调用init（）。问题是，这并不能保证图像数据在该点实际可用。AFAIR将在从网络中获取图像后触发，但之后仍需要解码

---

您最好等待图像的加载事件。

DUH。。。不，因为这是一个实践项目，我非常专注于我正在学习的新东西，我完全忘记了显而易见的东西（我只是在页面底部内联运行它）。因为没有那么多的图像资源，而且它们都很小，所以在window.onload上运行init（）可以很好地处理这个问题。非常感谢，Jakub。最终我想我还是会用数据URL替换所有的外部图像。