canvas drawImage第一次不绘制图像 [英] canvas drawImage doesn't draw images the first time

问题描述

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

I'm working on a simple JavaScript game using HTML5 canvas. It's a very typical game-loop setup involving:

• init（）函数初始化要使用的场对象， y位置和类似的设置任务


• draw（）函数可绘制所有游戏对象，包括一些简单的画布形状和几个图像


• setInterval每25毫秒调用一次绘图

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

While getting this project started, I had the setInterval call at the end of the init() function, so it'd just start drawing and animating as soon as you loaded the page, and everything worked fine. Now that I'm further along, I'd like to draw a fully populated, static playfield on load and then use a button to kick off the main game loop interval. So I added a single call to draw() at the end of init(), and the issue is that when I do this, all the canvas shapes get drawn properly but none of the images render on the canvas.

如果我让draw（）运行几次，就像<...>

They do render if I let draw() run a few times, like...

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

...但这似乎很蠢。为什么draw（）没有单个调用？我已经记录了对象在Chrome和Firefox的控制台，一切关于他们看起来不错;它们已经具有适当的img src路径，并且可以通过我的canvas.2dcontext.drawImage（）方法来启动可用于分配给新创建的Image（）的x / y值。

...but that seems dumb. Why doesn't a single call to draw() work? I've logged the objects in Chrome's and Firefox's consoles and everything about them looks fine; they already have the appropriate img src paths and start x/y values available to pass to assign to the new Image() that gets created and then called via my canvas.2dcontext.drawImage() method.

我在测试这个在Chrome 6和Firefox 3.6.10我去，他们都困惑我这种行为。在Chrome的控制台中没有显示任何错误或问题，但如果我只尝试调用draw（），则Firefox会抛出此异常：

I'm testing this in Chrome 6 and Firefox 3.6.10 as I go, and they're both puzzling me with this behavior. No errors or issues show in Chrome's console but if I try calling draw() only once the Firefox throw this:

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

uncaught exception: [Exception... "Component returned failure code: 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]

我的Google搜索的错误表明损坏的映像，但它们都在预览和Photoshop中打开没有任何问题。

My Google searches for that error suggest a corrupt image, but they all open in Preview and Photoshop without any problems.

推荐答案

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

I assume you are calling init() after the onload event of the window object is fired. The problem is, that does not guarantee to you that the image data is actually available at that point. AFAIR it would fire after the images are fetched from the network but then they still need to be decoded.

最好的办法是等待图像的onload事件。

Your best bet would be to wait for the images' onload event instead.

这篇关于canvas drawImage第一次不绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！