为什么果实无法绘制到canvas里？图片路径无误，请大伙指教
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title></title>
<script>
//海葵对象
function antObj(x,height,num)
{
this.x=[];
this.height=[];
} ;
antObj.prototype.aNum=50;
antObj.prototype.init=function()
{
for(var i=0;i<this.aNum;i++)
{
this.x[i]=i*21+Math.random();
this.height[i]=100+Math.random()*50
}
};
antObj.prototype.drawEnt=function()
{ ctx.save()
ctx.globalAlpha=0.4;
ctx.strokeStyle="#411074";
ctx.lineWidth=20;
ctx.lineCap="round"
for(var i=0;i<this.aNum;i++)
{
ctx.beginPath();
ctx.moveTo(this.x[i],canHeight);
ctx.lineTo(this.x[i],canHeight-this.height[i]);
ctx.stroke()
}
ctx.restore()
}
//果实对象
function fruitObj()
{
this.alive=[];
this.orange=new Image();
this.blue=new Image();
this.x=[];
this.y=[]
}
fruitObj.prototype.fNum=30;
fruitObj.prototype.init=function()
{
for(var i=0;i<this.fNum;i++)
{
this.alive[i]=true;
this.x[i]=0;
this.y[i]=0;
this.born(i)
}
this.orange.src="orange.png";
this.blue.src="bubble.png";
}
fruitObj.prototype.drawFruit=function()
{
for(var i=0;i<this.fNum;i++)
{
ctx.drawImage(this.orange,this.x[i],this.y[i]-20)
}
}
fruitObj.prototype.born=function(i)
{
var randomAntIndex=Math.ceil(50*Math.random()) //这里直接写50.与视频ant.aNum不同
this.x[i]=ant.x[randomAntIndex];
this.y[i]=canHeight-ant.height[randomAntIndex];
}
</script>
</head>
<body>
<canvas id="can"></canvas>
</body>
</html>
<script>
var can=document.getElementById("can")
var ctx=can.getContext("2d");
var lastTime;
var detelTime;
var canWidth=can.width=500;
var canHeight=can.height=500
var cBg=ctx.createRadialGradient(canWidth/2,canHeight/2-canHeight/3,0,canWidth/2,canHeight/2,canWidth)
cBg.addColorStop(0,"#ccc");
cBg.addColorStop(0.7,"#0a2d40")
//绘制海底背景
function drawBg()
{ ctx.fillStyle=cBg;
ctx.fillRect(0,0,canWidth,canHeight)
}
lastTime=Date.now();
detelTime=0;
drawBg() ;
var ant=new antObj();
ant.init();
ant.drawEnt();
var fruit=new fruitObj();
fruit.init();
fruit.drawFruit()
</script>
