<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas {
border: 1px solid #eeeeee;
display: block;
margin: 100px auto;
}
</style>
</head>
<body>
<canvas width="600px" height="400px"></canvas>
<script>
//构造函数
var Person=function(ctx){
this.ctx=ctx||document.querySelector('canvas').getContext('2d');
//图片的路径
this.src='./image/04.png';
//获取画布的大小
this.w=this.ctx.canvas.width;
this.h=this.ctx.canvas.height;
//方向,前0 左1 右2 后3
this.direction=0;
//步长
this.steplength=10;
//x轴的偏移步数
this.stepX=0;
//y轴的偏移步数
this.stepY=0;
};
//小人初始化
Person.prototype.init=function(){
var that=this;
this.onLoad(function(imgObj){
//获取精灵图中的图的大小
that.imgWidth=imgObj.width;
that.imgHeight=imgObj.height;
//获取人的大小
that.perW=that.imgWidth/4;
that.perH=that.imgHeight/4;
//画布正中心画小人
that.x0=that.w/2-that.perW/2;
that.y0=that.h/2-that.perH/2;
//展现小人
that.ctx.drawImage(imgObj,0,0,that.perW,that.perH,that.x0,that.y0,that.perW,that.perH);
//图片中每一行的下标
that.index=0;
//通过方向控制小人的行走
document.onkeydown=function(e){
console.log(e.keyCode);
//向前
if(e.keyCode===40){
that.direction=0;
that.stepY++;
that.drawImage(imgObj);
//向左
}else if(e.keyCode===37){
that.direction=1;
that.stepX--;
that.drawImage(imgObj);
//向右
}else if(e.keyCode===39){
that.direction=2;
that.stepX++;
that.drawImage(imgObj);
//向后
}else if(e.keyCode===38){
that.direction=3;
that.stepY--;
that.drawImage(imgObj);
}
};
});
};
//加载图片
Person.prototype.onLoad=function(callback){
var imgObj=new Image();
imgObj.onload=function(){
callback&&callback(imgObj);
};
imgObj.src=this.src;
};
//绘制图片
Person.prototype.drawImage=function(imgObj){
this.index++;
//先清理画布中的图片
this.ctx.clearRect(0,0,this.w,this.h);
//绘制图片
this.ctx.drawImage(imgObj,
this.index*this.perW,this.direction*this.perH,
this.perW, this.perH,
this.x0+this.stepX*this.steplength,this.y0+this.stepY*this.steplength,
this.perW,this.perH);
if(this.index>=3){
this.index=0;
}
};
var perObj=new Person();
perObj.init();
</script>
</body>
</html>
网友评论