使用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>

来源:https://www.icode9.com/content-4-793451.html

(0)

相关推荐