js实现canvas一群小人跑动效果代码-html代码-BFW代码库

js实现canvas一群小人跑动效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas一群小人跑动效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0;
          padding: 0;
        }
        html,
        body {
          height: 100%;
          width: 100%;
          font-family: serif;
          overflow: hidden;
          position: relative;
        }
        canvas {
          display: block;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
    </style>




</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        // Based on https://www.youtube.com/user/codingmath
        // Thank you so much.
        
        let gui, canvas, c, width, height, id, fks, runners;
        
        class Arm {
          constructor() {
            this.x = 0;
            this.y = 0;
            this.angle = 0;
            this.scale = 0;
            this.length = 0;
            this.centerAngle = 0;
            this.rotationRange = Math.PI / 4;
            this.parent = null;
            this.phaseOffset = 0;
          }
        
          create(length, centerAngle, rotationRange, phaseOffset, scale) {
            const obj = new this.constructor();
            obj.initialize(length, centerAngle, rotationRange, phaseOffset, scale);
        
            return obj;
          }
        
          initialize(length, centerAngle, rotationRange, phaseOffset, scale) {
            this.length = length;
            this.centerAngle = centerAngle;
            this.rotationRange = rotationRange;
            this.phaseOffset = phaseOffset;
            this.scale = scale;
          }
        
          setPhase(phase) {
            this.angle = this.centerAngle + Math.sin(phase + this.phaseOffset) * this.rotationRange;
          }
        
          getEndX() {
            let angle = this.angle;
            let parent = this.parent;
        
            while (parent) {
              angle += parent.angle;
              parent = parent.parent;
            }
        
            return Math.cos(angle) * this.length + this.x;
          }
        
          getEndY() {
            let angle = this.angle;
            let parent = this.parent;
        
            while (parent) {
              angle += parent.angle;
              parent = parent.parent;
            }
        
            return Math.sin(angle) * this.length + this.y;
          }
        
          render(c) {
            c.lineCap = 'round';
            c.lineWidth = 30 * this.scale;
        
            if (this.parent === null) {
              // body
              c.beginPath();
              c.moveTo(this.x, this.y);
              c.lineTo(this.x, this.y - this.length);
              c.stroke();
              // head
              c.beginPath();
              c.arc(this.x, this.y - this.length, gui.params.maxSize * this.scale, 0, Math.PI * 2, false);
              c.fill();
              // shadow
              c.save();
              c.globalAlpha = 0.03;
              c.beginPath();
              c.ellipse(this.x, this.y + this.length * 2, this.length * 3 * this.scale, this.length / 2 * this.scale, 0, Math.PI * 2, false);
              c.fill();
              c.restore();
            }
        
            c.beginPath();
            c.moveTo(this.x, this.y);
            c.lineTo(this.getEndX(), this.getEndY());
            c.stroke();
          }}
        
        
        class FKSystem {
          constructor(x, y, v, rand) {
            this.initialize(x, y, v, rand);
          }
        
          initialize(x, y, v, rand) {
            this.x = x;
            this.y = y;
            this.v = v;
            this.lastArm = null;
            this.phase = 0;
            this.speed = 0.1 * rand + 0.05;
            this.arms = [];
          }
        
          addArm(length, centerAngle, rotationRange, phaseOffset, scale) {
            const a = new Arm();
            const arm = a.create(length, centerAngle, rotationRange, phaseOffset, scale);
        
            this.arms.push(arm);
        
            if (this.lastArm) {
              arm.parent = this.last.........完整代码请登录后点击上方下载按钮下载查看