<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas {
border: 1px solid #ddd;
margin: 100px;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
/*构造函数*/
var Person = function(ctx) {
this.ctx = ctx || document.querySelector("canvas").getContext("2d");
/*图片路径*/
this.src = "img/20181011151329.jpg";
/*画布大小*/
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
/*行走相关参数*/
this.stepSize = 10;
/*和图片的行数有关*/
this.direction = 0;
/*x轴方向偏移步数*/
this.stepX = 0;
/*y轴方向偏移步数*/
this.stepY = 0;
/*初始化方法*/
this.init();
}
/*行为方法*/
Person.prototype.init = function() {
var that = this;
/*加载图片*/
this.loadImage(function(image) {
/*图片的大小*/
that.imageWidth = image.width;
that.imageHeight = image.height;
/*人物的大小*/
that.personWidth = that.imageWidth / 4;
that.personHeight = that.imageHeight / 10;
/*图片起点*/
that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
/*默认绘制在中心位置,正面朝向外*/
that.ctx.drawImage(image, 0, 0, that.personWidth, that.personHeight, that.x0, that.y0, that.personWidth, that.personHeight);
/*通过方向键控制人物行走*/
that.index = 0;
document.onkeydown = function(e) {
if(e.keyCode == 40) {
/*前*/
that.direction = 0;
that.stepY++;
that.drawImage(image);
} else if(e.keyCode == 37) {
/*左*/
that.direction = 1;
that.stepX--;
that.drawImage(image);
} else if(e.keyCode == 39) {
/*右*/
that.direction = 2;
that.stepX++;
that.drawImage(image);
} else if(e.keyCode == 38) {
/*后*/
that.direction = 3;
that.stepY--;
that.drawImage(image);
}
}
})
}
/*加载图片*/
Person.prototype.loadImage = function(callback) {
var image = new Image();
image.onload = function() {
callback && callback(image);
}
image.src = this.src;
}
/*绘制图片*/
Person.prototype.drawImage = function(image) {
this.index++;
/*清除画布*/
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
/*绘图*/
this.ctx.drawImage(image, this.index * this.personWidth, this.direction * this.personHeight, this.personWidth, this.personHeight, this.x0+this.stepX*this.stepSize, this.y0+this.stepY*this.stepSize, this.personWidth, this.personHeight);
if(this.index >= 3) {
this.index = 0;
}
}
/*初始化*/
new Person();
</script>
</body>