為什么果實(shí)無(wú)法繪制到canvas里?圖片路徑無(wú)誤,請(qǐng)大伙指教
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
? ? <title></title>
? ? <script>
? ? //??麑?duì)象
? ? 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()
? ? }
? ? //果實(shí)對(duì)象
? ? 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>