Question

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

init（）函数初始化要用于playfield的对象，随机化一些起始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的控制台中没有显示任何错误或问题，但是如果我尝试只调用一次（），则会抛出一次：

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

我的Google搜索该错误表示图片已损坏，但它们都在预览和Photoshop中打开，没有任何问题。

Answer 1

我假设您在触发window对象的onload事件后调用init（）。问题是，这并不能保证图像数据在那时实际可用。 AFAIR会在从网络中提取图像后触发，但之后仍然需要进行解码。

你最好的选择是等待图片'onload事件。

canvas drawImage第一次不绘制图像

1 个答案: