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

代码语言：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.y, shape.origin.z);
            length = shape.length;
            if (type === 'prism') {
              obj = Shape.Prism(origin, length.x, length.y, length.z);
            } else if (type === 'pyramid') {
              obj = Shape.Pyramid(origin, length.x, length.y, length.z);
            }
          }
          if (type === 'cylinder') {
            origin = new Point(shape.origin.x, shape.origin.y, shape.origin.z);
            obj = Shape.Cylinder(origin, shape.radius, shape.vertices, shape.length);
          }
          if (type === 'path') {
            points = shape.points.map(function(point) {
              return new Point(point.x, point.y, point.z);
            });
            obj = new Path(points);
            if (shape.extrude) {
              obj = Shape.extrude(obj, shape.length);
            }
          }
          if (shape.translate) {
            obj = obj.translate(shape.translate.x, shape.translate.y, shape.translate.z);
          }
          if (shape.scale) {
            if (!shape.scale.origin) {
              shape.scale.origin = this.util.shapeCenter(shape);
            }
            obj = obj.scale(shape.scale.origin, shape.scale.x, shape.scale.y, shape.scale.z);
          }
          if (shape.rotateZ) {
            if (!shape.rotateZ.origin) {
              shape.rotateZ.origin = this.util.shapeCenter(shape);
            }
            obj = obj.rotateZ(shape.rotateZ.origin, this.util.rotation(shape.rotateZ.rotation));
          }
          if (shape.rotateY) {
            if (!shape.rotateY.origin) {
              shape.rotateY.origin = this.util.shapeCenter(shape);
            }
            obj = obj.rotateY(shape.rotateY.origin, this.util.rotation(shape.rotateY.rotation));
          }
          if (shape.rotateX) {
            if (!shape.rotateX.origin) {
              shape.rotateX.origin = this.util.shapeCenter(shape);
            }
            obj = obj.rotateX(shape.rotateX.origin, this.util.rotation(shape.rotateX.rotation));
          }
          this.$Isomer.add(obj, this.util.color(shape.color));
        }
      }

      clear() {
        return this.$Isomer.canvas.clear();
      }

      loop() {
        this.clear();
        this.render();
        if (this.config.loop) {
          this.config.loop.call(this.scope, this.$Isomer);
        }
        return requestAnimationFrame(() => {
          return this.loop(this.config.loop);
        });
      }

      init() {
        this.updateCanvasSize();
        if (this.config.loop) {
          this.loop();
        } else {
          this.render();
        }
        return this.wasInitiated = true;
      }

    };

    Engine.prototype.util = {
      color: function(colorCode) {
        var converted;
        converted = TinyColor(colorCode);
        return new Color(converted._r, converted._g, converted._b, converted._a);
      },
      rotation: function(degrees) {
        return degrees * Math.PI / 180;
      },
      shapeCenter: function(shape) {
        return {
          x: shape.origin.x + shape.length.x / 2,
          y: shape.origin.y + shape.length.y / 2,
          z: shape.origin.z + shape.length.z / 2
        };
      }
    };

    return Engine;

  }).call(this);

}).call(this);
    </script>
    <script>
    (function() {
  //  Isomer.JS Engine
  //  This pen extends a external code.
  //  https://codepen.io/FelixLuciano/pen/NEBmKN
  new Engine({
    scope: {
      dinoHUE: 85,
      xOffset: 0,
      zOffset: 0
    },
    shapes: function() {
      return [
        {
          type: 'path', // Shadow
          color: '#0000001a',
          points: [
            {
              x: 0,
              y: 0,
              z: 0
            },
            {
              x: 0,
              y: 5,
              z: 0
            },
            {
              x: 5,
              y: 5,
              z: 0
            },
            {
              x: 5,
              y: 0,
              z: 0
            }
          ]
        },
        {
          origin: {
            x: 1,
            y: 1.5,
            z: 0 // Left leg
          },
          length: {
            x: 2,
            y: .5,
            z: .5
          },
          color: '#d65a3e',
          translate: {
            x: this.xOffset,
            y: 0,
            z: 0
          }
        },
        {
          origin: {
            x: 1.5,
            y: 1,
            z: 0 // Left leg
          },
          length: {
            x: 1.5,
            y: .5,
            z: .5
          },
          color: '#d65a3e',
          translate: {
            x: this.xOffset,
            y: 0,
            z: 0
          }
        },
        {
          origin: {
            x: 1,
            y: .5,
            z: 0 // Left leg
          },
          length: {
            x: 2,
            y: .5,
            z: .5
          },
          color: '#d65a3e',
          translate: {
            x: this.xOffset,
            y: 0,
            z: 0
          }
        },
        {
          origin: {
            x: 2,
            y: 1,
            z: .5 // Left leg
          },
          length: {
            x: .5,
            y: .5,
            z: 1.5
          },
          color: '#d65a3e',
          translate: {
            x: this.xOffset,
            y: 0,
            z: 0
          }
        },
        {
          origin: {
            x: 1,
            y: 4,
            z: 0 // Righ.........完整代码请登录后点击上方下载按钮下载查看