canvas drawImage第一次不绘制图像

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的控制台中没有显示任何错误或问题但是如果我尝试只调用一次,那么只有在Firefox抛出此内容时才会调用draw():

未捕获的异常:[Exception ..."组件返回失败代码:0x80040111(NS_ERROR_NOT_AVAILABLE)[nsIDOMCanvasRenderingContext2D.drawImage]"nsresult:"0x80040111(NS_ERROR_NOT_AVAILABLE)"location:"JS frame :: http:// localhost/my-game-url / :: drawItem :: line 317"data:no]

我的谷歌搜索该错误表明图像已损坏,但它们都在预览和Photoshop中打开而没有任何问题.

Answer 1

我假设你在窗口对象的onload事件被触发后调用init().问题是,这并不能保证图像数据在那时实际可用.AFAIR会在从网络中提取图像后触发,但是仍然需要对其进行解码.

你最好的选择是等待图像的onload事件.