在javascript中加载用于在画布上绘制的图像

我一直在努力教我11岁的儿子用javascript编程，但作为一名java程序员，我不太确定下面的内容是否能正常工作。编写的代码在

drawRocket

方法中显示一个简单的块，但我儿子希望它显示一个火箭的图像。但是，如果我在

drawImage

方法中进行注释，并注释掉

drawRect

方法，则它不会显示火箭图像

通过阅读stackoverflow主题中的各种线程，我了解到问题在于javascript没有同步加载图像，因此我需要在rocket image对象上使用onload侦听器编写代码。但是，我尝试用此代码替换

main（）

调用（并从main方法中删除两行）：

但它仍然不起作用。我尝试了其他各种方法，但似乎都不管用。rocket.jpg图像很好

毫无疑问，答案很简单，但2小时后我仍在挣扎。需要帮忙吗

谢谢

C

p.S.煤动力火箭是下一件大事；）

函数drawSky（ctx）{
ctx.fillStyle=“rgb（0,0,50）”；
ctx.fillRect（0,0300300）；
}
功能提取场（ctx）{
ctx.fillStyle=“rgb（150127）”；
ctx.fillRect（0295300,5）；
}
功能牵引火箭（ctx、火箭、高度）{
var drawHeight=250-高度*2；
如果（图纸高度>245）
拉深高度=245；
//ctx.drawImage（火箭，140，drawHeight，20，50）；
ctx.fillStyle=“rgb（255,0,0）”；
ctx.fillRect（140，拉深高度，20,50）；
}
功能抽屉爆炸（ctx，尺寸）{
ctx.fillStyle=“rgb（255102,0）”；
ctx.beginPath（）；
ctx.arc（150295，尺寸，180*Math.PI/180360*Math.PI/180）；
ctx.fill（）；
}
功能牵引煤杆（ctx，煤）{
ctx.fillStyle=“rgb（255255）”；
ctx.fillText（“煤炭”，第10、25页）；
如果（0煤）
{
文件。写入（“燃烧：+燃烧+”千克”）；
文件。写（“-高度：+高度+m”）；
文件。写入（“-速度：+速度+”m/s”）；
文件。填写（“-煤：+煤+千克”）；
文件。写（“
”）；
drawSky（ctx）；
绞车（ctx）；
牵引火箭（ctx、火箭、高度）；
牵引煤棒（ctx，煤）；
//要求燃烧一定数量的煤
var burn=prompt（“您希望燃烧多少煤？”）；
燃烧=数量（燃烧）；
如果（燃烧>煤）
燃烧=煤；
如果（-燃烧>煤）
燃烧=煤；
如果（燃烧>=0）
煤=煤燃烧；
其他的
煤=煤+燃烧；
速度=速度+重力-燃烧；
高度=高度-速度；
}
文件。写（“
”）；
drawSky（ctx）；
绞车（ctx）；
如果（速度请尝试以下操作：

var rocket = new Image();
rocket.onload = function(){ main(rocket) };
rocket.src = "rocket.jpg";

发生的情况是，您正在调用函数
main（）
，而
main
的结果将被提供给
onload

您可以简单地这样编写，以提供对
main
的引用：

rocket.onload = main;  //main will be invoked when image is loaded

或

在后者中，我们提供一个匿名函数作为参数，当调用该函数时，
main（）

由于
rocket
在本例中是全局可用的，因此无需将其作为参数提供给
main
，但如果需要使用其他图像调用
main
，这当然是一种很好的方法。但是，您可以向main添加一个参数变量：

function main(image) {

    /// ctx.drawImage(image, 0, 0); etc..
}

也考虑在图像加载出错的情况下实现图像的<代码>错误> /COD>回调处理程序。
 var火箭=新图像（）；ROCKE.SRC=“火箭.jpg”；Rok.OnLoad =主（火箭）；您应该添加关于解决方案的一些细节，以向问题的作者解释。
rocket.onload = main;  //main will be invoked when image is loaded

rocket.onload = function(e) { main() };

function main(image) {

    /// ctx.drawImage(image, 0, 0); etc..
}