Javascript HTML5 Canvas drawImage（）内部对象文字

我试图用HTML5使用对象文字模式制作一个蛇游戏，但我似乎无法在画布上绘制图像。我做了很多研究，发现例如，在创建对象时，我无法设置图像

src

（因此我将其放在函数中）。该图像在控制台中显示时似乎可用，并且可以附加到正文中。请问我错过了什么

（函数（$）{
$.fn.preload=函数（）{//http://stackoverflow.com/a/476681
这个。每个（函数（）{
$（'=0；i--）{
这个是.snakeArray.push({
x:我，
y:1//y:0-snake在单元单位中的初始位置
});
}
},
//创建食物项
createFood:function（）{
这是我的食物{
x:Math.round（Math.random（）*（宽度-单元格宽度）/单元格宽度），
y:Math.round（Math.random（）*（高度-单元格宽度）/单元格宽度）
}//x和y介于0和之间的食物位置，例如44
},
//绘图功能
绘图：函数（）{
//在每个帧上重新绘制背景
console.log（this.background）；//显示
this.ctx.drawImage（this.background，0，0）；//为什么这不起作用？
$（'body'）.append（this.background）；//追加图像，没问题
}
};
game.init（）；
})

---

这里的问题是，在调用

game.init（）

和

game.draw（）

的同时，图像正在异步预加载，这要求图像已经加载

因此，除非图像在浏览器的缓存中，否则异步预加载可能在

game.draw（）时尚未完成

您需要等到预加载完成后才能调用
game.init（）
。JavaScript提供了一些处理异步执行的好工具，例如回调、承诺等

请看这里：
我使用对象文字模式是因为我想开始编写更好的结构化代码。看起来这可能会导致更多的问题，而不是它在本例中解决的问题。有没有办法将所有加载程序从链接放入对象文字？或者它一定需要留在外部？