帆布的drawImage不绘制图像首次

我正在使用HTML5画布一个简单的JavaScript游戏。这是一个非常典型的游戏循环设置包括：帆布的drawImage不绘制图像首次

init（）函数中使用的操场上传来初始化对象，随机一些启动x/y位置和类似的设置任务，吸引了所有
draw（）函数游戏的对象，包括一些简单的帆布形状和一些图片
的setInterval叫得出每25毫秒

虽然获得这个项目的启动，我不得不在init（）函数结束时setInterval的电话，所以它会尽快开始绘制和动画当你加载页面时，一切正常。现在我又进了一步，我想在负载上绘制一个完整的静态比赛场地，然后使用一个按钮启动主游戏循环间隔。所以我加了一个调用绘制（）在的init（）结束，而问题是，当我这样做，所有的帆布形状得到正确绘制，但没有图像的画布上呈现。

他们做渲染，如果我让画（）跑了几次，就像...

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

...但似乎愚蠢的。为什么没有一个调用draw（）工作？我已经在Chrome和Firefox的控制台中记录了这些对象，并且关于它们的所有内容都看起来不错;他们已经有了相应的IMG SRC路径和启动x /可用的y值传递给分配给新的图像（）时生成，然后通过我的canvas.2dcontext.drawImage（）方法调用。

我在Chrome 6和Firefox 3.6.10，我去测试这一点，他们都百思不得其解这种行为。没有错误或问题显示在Chrome的控制台，但如果我尝试调用的draw（）只有一次火狐抛出此：

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

我的谷歌搜索的错误提示已损坏的图片，但他们全部在Preview和Photoshop中打开，没有任何问题。

来源

2010-10-03 RwwL

我假设你正在调用的init（）的窗口对象的onload事件之后触发。问题是，这并不能保证图像数据在这一点上是真正可用的。 AFAIR会在从网络获取图像后触发，但仍然需要解码。

你最好的选择是等待图片onload事件来代替。

来源

2010-10-03 15:38:19

DUH ... nope，因为这是一个实践项目，我非常关注我学习的新东西，我完全忘记了这个明显的问题（我只是在页面底部内联运行它）。由于没有那么多的图像资源，而且它们都很小，在window.onload上运行init（）可以很好地处理这个问题。非常感谢，Jakub。 – RwwL 2010-10-03 15:45:14

最终我想我会用数据URL替换所有的外部图像。 – RwwL 2010-10-03 16:24:58

帆布的drawImage不绘制图像首次

回答

相关问题