isomer+tinycolor实现canvas机器鸭步行动画代码-html代码-BFW代码库

isomer+tinycolor实现canvas机器鸭步行动画代码

代码语言：html

所属分类：动画

代码描述：isomer+tinycolor实现canvas机器鸭步行动画代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {  background: #69CEEC;}canvas {  width: 100%;  height: 100%;  position: absolute;}
    </style>
</head>

<body>
    <canvas id="Isomer"></canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/isomer.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>
    <script>
        (function() {

  var Color, Path, Point, Shape, TinyColor, Vector, configurationModel;

  ({Point, Path, Shape, Vector, Color} = Isomer);

  TinyColor = tinycolor;

  configurationModel = {
    el: '#Isomer',
    scope: {},
    shapes: function() {
      return [];
    },
    loop: null,
    beforeInit: null
  };

  window.Engine = (function() {
    class Engine {
      constructor(configuration) {
        this.config = Object.assign(configurationModel, configuration);
        this.$Isomer = new Isomer(document.querySelector(this.config.el));
        this.scope = this.config.scope;
        this.shapes = this.config.shapes;
        this.wasInitiated = false;
        this.$Isomer.offsetX = 0;
        this.$Isomer.offsetY = 200;
        this.updateCanvasSize();
        window.addEventListener('resize', () => {
          this.updateCanvasSize();
          if (this.wasInitiated && !this.config.loop) {
            return this.render();
          }
        });
        if (this.config.beforeInit) {
          this.config.beforeInit.call(this);
        } else {
          this.init();
        }
      }

      updateCanvasSize() {
        this.$Isomer.canvas.elem.width = window.innerWidth * 2;
        this.$Isomer.canvas.elem.height = window.innerHeight * 2;
        this.$Isomer.canvas.width = window.innerWidth * 2;
        this.$Isomer.canvas.height = window.innerHeight * 2;
        this.$Isomer.originX = window.innerWidth - this.$Isomer.offsetX;
        return this.$Isomer.originY = window.innerHeight + this.$Isomer.offsetY;
      }

      render() {
        var i, len, length, obj, origin, points, ref, shape, type;
        ref = this.shapes.call(this.scope);
        for (i = 0, len = ref.length; i < len; i++) {
          shape = ref[i];
          if (shape.hide) {
            continue;
          }
          type = shape.type || 'prism';
          obj = null;
          if (type === 'prism' || type === 'pyramid') {
            origin = new Point(shape.origin.x, shape.origin.........完整代码请登录后点击上方下载按钮下载查看