使用canvas完成帧动画（方向键控制行走的小人）

印度阿三17 2020-12-21

展开全文

根据此精灵图设置动图
在这里插入图片描述

<!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./content-4-793451.html