canvas drawImage第一次不绘制图像

Posted 2023-03-05

【中文标题】canvas drawImage第一次不绘制图像

【英文标题】：canvas drawImage doesn't draw images the first time

【发布时间】：2011-04-20 12:03:19

【问题描述】：

我正在使用 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 行“数据：无]

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

【参考方案1】：

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

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

【讨论】：

DUH...不，因为这是一个练习项目，我非常专注于我正在学习的新东西，我完全忘记了显而易见的（我只是在底部内联运行它页）。由于没有那么多图像资源并且它们都很小，因此在 window.onload 处运行 init() 可以很好地处理这个问题。非常感谢，Jakub。

最终我想我还是会用数据 URL 替换所有外部图像。