参考以下一段示例代码:
can=document.getElementById("canvas");
ctx=can.getContext('2d');
//定义一个类
var fruitObj=function()
{
this.x=[];
this.y=[];
this.l=[];
}
fruitObj.prototype.init=function()//初始化
{
this.x[i]=0;
this.y[i]=0;
}
fruitObj.prototype.draw=function()
{
if(this.l[i]<=10)//此处是为了限制图片的最大范围
{
this.l[i]+=0.01*deltaTime;//deltaTime是两帧之间的时间间隔
}
else
{
this.y[i]-=0.07*deltaTime;//同理也可以实现图片的上浮
}
ctx.drawImage(pic,this.x[i]-this.l[i]*0.5,this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]);//*0.5是为了将图片绘制在确切的位置
}
如果要同时处理很多图片,还可以控制每张图片有不同的浮动速度以及变大变小速度,此时需增加一个变量:
this.spd=[];//速度控制
初始化为:
this.spd[i]=Math.random()*0.017+0.003;//[0.003,0.02)
因此上面代码中的红色部分就可以替换为:
this.l[i]+=this.spd[i]*deltaTime;
this.y[i]-=this.spd[i]*7*deltaTime;