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) {
            .........完整代码请登录后点击上方下载按钮下载查看