H5canvas 6:帧动画
使用canvas实现动画效果是一种很不错的方式,这里要实现的是帧动画。
我找了小女孩走路的各个姿势图,使用代码,实现了走路这一效果。
下面几个按钮分别是:创建,走路,改变速度,以及停止
我这里创建了两个js文件
let Girl=function(x,y,w,h,dx,dy,sw,sh){
this.girlImage;
this.girlReady=false;
//图像数据
this.p=[
{px:5,py:5,w:190,h:290},
{px:205,py:5,w:190,h:290},
{px:605,py:5,w:190,h:290},
{px:805,py:5,w:190,h:290},
{px:1005,py:5,w:190,h:290},
{px:1205,py:5,w:190,h:290},
{px:1405,py:5,w:190,h:290}
];
//位置
this.x;
this.y;
//大小
this.w;
this.h;
//速度
this.dx;
this.dy;
//移动范围
this.sw;
this.sh;
//当前帧
this.findex;
//加载图像
this.loadImage();
//第一次初始化
this.init(x,y,w,h,dx,dy,sw,sh);
}
//角色的初始化
Girl.prototype.init=function(x,y,w,h,dx,dy,sw,sh){
//位置
this.x=x;
this.y=y;