tinycolor实现彩色方块闪现canvas动画效果代码-html代码-BFW代码库

tinycolor实现彩色方块闪现canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：tinycolor实现彩色方块闪现canvas动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
html { overflow-x: hidden; overflow-y: auto; }
body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>

<canvas id="cnv"></canvas>

<script type="text/javascript">
(function() {
  var App, Pixr, Random, Utils, Vec, log, rnd, twopi, utl;

  Vec = (function() {
    var degrees2radian, radian2degrees;

    class Vec {
      constructor(x, y) {
        this.x = x || 0;
        this.y = y || 0;
        if (!(this instanceof Vec)) {
          new this(x, y);
        }
      }

      add(v) {
        this.x += v.x;
        this.y += v.y;
        return this;
      }

      sub(v) {
        this.x -= v.x;
        this.y -= v.y;
        return this;
      }

      mul(v) {
        this.x *= v.x;
        this.y *= v.y;
        return this;
      }

      div(v) {
        this.x /= v.x;
        this.y /= v.y;
        return this;
      }

      limit(max, f = 0) {
        if (this.x > max) {
          this.x = max;
        }
        if (this.y > max) {
          this.y = max;
        }
        return this;
      }

      zero() {
        this.x = 0;
        this.y = 0;
        return this;
      }

      clone() {
        return new Vec(this.x, this.y);
      }

      rotate(angle) {
        var nx, ny;
        nx = this.x * Math.cos(angle) - (this.y * Math.sin(angle));
        ny = this.x * Math.sin(angle) + (this.y * Math.cos(angle));
        this.x = nx;
        this.y = ny;
        return this;
      }

      rotateDeg(angle) {
        angle = degrees2radian(angle);
        return this.rotate(angle);
      }

      inside(x, y, w, h) {
        if (this.x > x || this.x < w || this.y > y || this.y < h) {
          return true;
        }
        return false;
      }

      outside(x, y, w, h) {
        if (this.x < x || this.x > w || this.y < y || this.y > h) {
          return true;
        }
        return false;
      }

    };

    radian2degrees = function(rad) {
      return rad * (180 / Math.PI);
    };

    degrees2radian = function(deg) {
      return deg / (180 / Math.PI);
    };

    return Vec;

  }).call(this);

  Random = class Random {
    constructor() {
      return;
    }

    int(min = -1, max = 1) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    real(min, max) {
      if (!min) {
        return Math.random();
      }
      return Math.random() * (max - min) + min;
    }

    ranger(min, max, val) {
      var rs;
      rs = this.int(min, max);
      if (rs === val) {
        return true;
      }
      return false;
    }

    pick(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }

    fill(min, max, size, int = true) {
      var arr, i, j, k, ref, ref1;
      arr = [];
      if (int) {
        for (i = j = 0, ref = size; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
          arr.push(this.int(min, max));
        }
      } else {
        for (i = k = 0, ref1 = size; 0 <= ref1 ? k < ref1 : k > ref1; i = 0 <= ref1 ? ++k : --k) {
          arr.push(this.real(min, max));
        }
      }
      return arr;
    }

    hex() {
      var h, i, j;
      h = &quo.........完整代码请登录后点击上方下载按钮下载查看