<canvas>学习笔记——控制图片大小及位移

参考以下一段示例代码：

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;