使用canvas完成帧动画（方向键控制行走的小人）
根据此精灵图设置动图
<!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> 赞 (0)