代码之家 › 专栏 › 技术社区 › RwwL

画布DrawImage第一次不绘制图像

drawimage canvas html5 javascript

RwwL · 技术社区 · 14 年前

我正在使用HTML5画布开发一个简单的javascript游戏。这是一个非常典型的游戏循环设置,包括:

init()函数,用于初始化要在PlayField中使用的对象,随机化一些起始X/Y位置和类似的设置任务。
draw()函数,用于绘制所有游戏对象,包括一些简单的画布形状和一些图像。
每隔25毫秒设置调用draw的间隔

在启动这个项目的时候,我在init()函数的末尾调用了setInterval,所以只要你加载了页面,它就开始绘制和动画,一切都很好。接下来,我要绘制一个完全填充的静态游戏场,然后使用一个按钮开始主游戏循环间隔。所以我在init()的末尾添加了一个对draw()的调用,问题是当我这样做时,所有的画布形状都会被正确地绘制,但没有任何图像在画布上呈现。

他们做如果让draw()运行几次,例如…

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

…但那似乎很愚蠢。为什么对draw()的单个调用不起作用?我已经在Chrome和火狐的控制台中记录了这些对象,它们的一切看起来都很好;它们已经有了合适的img-src路径和start x/y值,可以传递给新的image(),这个新的image()是通过canvas.2dcontext.drawimage()方法创建并调用的。

我正在Chrome6和Firefox3.6.10中测试这个,它们都让我对这个行为感到困惑。Chrome的控制台中没有显示任何错误或问题,但是如果我只尝试调用draw()一次,火狐就会抛出这个命令:

未捕获异常:【异常…”组件返回故障代码:0x80040111(ns_错误_不可用)[nsidomcanvasrenderingcontext2d.drawimage]“nsresult:”0x80040111(ns_错误_不可用)”位置:“js frame:: http://localhost/my-game-url/ ::drawitem::line 317“数据:否]

我的google搜索到的这个错误表明一个损坏的图像,但它们都在预览和photoshop中打开,没有任何问题。