根据此精灵图设置动图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}canvas {display: block;margin: 100px auto;position: relative;}</style></head><body> <canvas width="600" height="400" style="border: 1px solid gray;"></canvas><script>var Persion = function (ctx) {this.ctx = ctx || document.querySelector('canvas').getContext('2d');this.src = "../img/03.png";//获取画布大小this.canvasWidth = this.ctx.canvas.width;this.canvasHeight = this.ctx.canvas.height;// 行走参数this.stepSzie = 10;// 0 前 1 左 2 右 3 后this.direction = 0;this.stepX = 0;this.stepY = 0;this.init();}Persion.prototype.init = function () {var that = this;/*1.加载图片*/this.loadImage(function (image) {/*图片的大小*/that.imageWidth = image.width;that.imageHeight = image.height;/*人物的大小*/that.personWidth = that.imageWidth / 4;that.personHeight = that.imageHeight / 4;/*绘制图片的起点*/that.x0 = that.canvasWidth / 2 - that.personWidth / 2;that.y0 = that.canvasHeight / 2 - that.personHeight / 2;/*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);/*后*/}}})}Persion.prototype.loadImage = function (callback) {var image = new Image();image.onload = function () {callback && callback(image);}image.src = this.src;}Persion.prototype.drawImage = function (image) {this.index++;// 清除画布this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 定位到x 索引 // y方向this.ctx.drawImage(image,this.index * this.personWidth, this.direction * this.personHeight,this.personWidth, this.personHeight,this.x0 + this.stepX * this.stepSzie, this.y0 + this.stepY * this.stepSzie,this.personWidth, this.personHeight);/*如果索引超出了 变成0*/if (this.index >= 3) {this.index = 0;}}new Persion()</script></body></html>
