canvas drawImage不会在第一次绘制图像

问题描述

我正在使用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():

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

我假设您是在触发窗口对象的onload事件之后调用init()的.问题是，这并不能保证您当时确实可以使用图像数据.从网络上获取图像后，它将触发，但是仍然需要对其进行解码.

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

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

• init() function that initializes objects to be used the playfield, randomizing some start x/y positions and similar setup tasks
• draw() function that draws all the game objects, including some simple canvas shapes and a few images
• setInterval to call draw every 25 milliseconds

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.

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)

...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.

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:

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

解决方案

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.

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

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