为什么'；图像是否出现在这个HTML5/JavaScript程序中？

我有一个包含JavaScript代码的HTML5文档。该脚本定义了一个构造函数来创建汽车对象，以及在鼠标移动时计算汽车位置并在画布中绘制汽车的方法

我在Chrome浏览器控制台中没有收到任何错误，日志消息也没有显示任何问题，但汽车没有显示。代码如下：

编辑：在这个游戏中，汽车按照鼠标位置旋转和移动。另外，我有一个必须以汽车为中心的视口。因此，在绘制任何东西之前，我将画布的原点转换为（camx，camy），根据我的计算，这是画布应该放置的位置，以便围绕汽车居中

基本上，我的想法是：视口不在地图上滚动，而是保持静止，我只移动整个画布

功能车（x、y、方向、id、类型）{
//x和y是汽车对象中心的坐标
这个.x=x；
这个。y=y；
this.type=type；
this.speed=5；//默认速度=5
this.isAlive=1；
这个参数=1；
this.id=id；
这个方向=方向；
this.img=新图像（）；
this.img.source=“car1.png”；
此.img.width=200；
this.img.x=this.x；
this.img.y=this.y；
该高度=100；
this.img.orientation=this.orientation；
//根据鼠标位置更新汽车的位置和方向
this.updatePosAndOrien=函数（）{
//使用mousex和mousey以及汽车的x y位置计算方向
var targetX=mousex-this.x；
var targetY=mousey-this.y；
var trgtOrien=Math.atan2（targetY，targetX）；
这个方向=trgtOrien；
//计算位置
var dx=mousex-this.x；
var dy=mousey-this.y；
变量距离=数学sqrt（dx*dx+dy*dy）；
var系数=距离/该速度；
var xspeed=dx/系数；
var y速度=dy/系数；
this.x=this.x+xspeed；
this.y=this.y+y速度；
};
//在画布上绘制汽车的绘制方法
this.draw=函数（）{
this.img.onload=函数（）{
保存（）；//保存上下文
ctx.translate（Math.round（this.x）、Math.round（this.y））；//将上下文原点转换或移动到图像中心
ctx.旋转（此方向）；
ctx.drawImage（img，-（this.width/2），-（this.height/2），
这个。宽度，这个。高度）；
还原（）；//还原上下文
}
};
}
函数drawIt（）{
如果（我们的车！=未定义）{
ourCar.updatePosAndOrien（）；
控制台日志（“绘制汽车”）；
我们的车；
}
控制台日志（“未定义车辆”）；
请求动画帧（drawIt）；
}
//玩家
var ourCar=新车（3004002111）；
请求动画帧（drawIt）
正文{
溢出：隐藏；
}
您试图实现什么。鼠标位置？如果移动鼠标位置将改变，并且您计划如何绘制objectHTMLImageElement没有
源
参数；我猜你的意思是
src
。此外，您必须等待图像加载后才能在画布上绘制：@Jijo Cleetus车辆位置会随着鼠标移动而更新，使用鼠标坐标计算车辆方向和新位置。因此，汽车随着鼠标移动和旋转。@kaido它有一个来源。汽车构造师设置图像字段并为其指定源。在构造函数的draw方法中，我在绘制图像之前等待加载事件。kaido表示您创建的
this.image
对象上没有“source”这样的属性。见和。