6

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

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

在开始这个项目时，我在 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 值可用于传递以分配给创建的新 Image()，然后通过我的 canvas.2dcontext.drawImage() 方法调用。

我正在 Chrome 6 和 Firefox 3.6.10 中对此进行测试，他们都对这种行为感到困惑。Chrome 的控制台中没有显示任何错误或问题，但如果我尝试仅在 Firefox 抛出此错误后调用 draw()：

未捕获的异常：[异常...“组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]”nsresult：“0x80040111（NS_ERROR_NOT_AVAILABLE）”位置：“JS 框架 :: http://localhost/my-game-url / :: drawItem :: 317行”数据：无]

我的谷歌搜索该错误提示图像损坏，但它们都在 Preview 和 Photoshop 中打开，没有任何问题。

4

1 回答 1

8

我假设您在触发窗口对象的 onload 事件后调用 init() 。问题是，这并不能向您保证当时图像数据实际上是可用的。AFAIR 会在从网络获取图像后触发，但仍需要对其进行解码。

您最好的选择是等待图像的 onload 事件。

于 2010-10-03T15:38:19.103 回答