canvas线条变色交汇旋转动画效果代码-html代码-BFW代码库

canvas线条变色交汇旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas线条变色交汇旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


</head>

<body>




    <script>
        "use strict"; // Paul Slaymaker, paul25882@gmail.com
        const body = document.getElementsByTagName("body").item(0);
        body.style.background = "#000";
        const TP = 2 * Math.PI;
        const CSIZE = 400;
        
        const ctx = (() => {
          let d = document.createElement("div");
          d.style.textAlign = "center";
          body.append(d);
          let c = document.createElement("canvas");
          c.width = c.height = 2 * CSIZE;
          d.append(c);
          return c.getContext("2d");
        })();
        ctx.translate(CSIZE, CSIZE);
        ctx.globalCompositeOperation = "lighten";
        
        onresize = () => {
          let D = Math.min(window.innerWidth, window.innerHeight) - 40;
          ctx.canvas.style.width = D + "px";
          ctx.canvas.style.height = D + "px";
        };
        
        const getRandomInt = (min, max, low) => {
          if (low) return Math.floor(Math.random() * Math.random() * (max - min)) + min;else
          return Math.floor(Math.random() * (max - min)) + min;
        };
        
        var t = 0;
        var nodeCount = 14;
        var armCount = 160;
        var af = new Array(nodeCount);
        var afo = new Array(nodeCount);
        var afo2 = new Array(nodeCount);
        for (let i = 0; i < nodeCount; i++) {
          afo[i] = 1 - 2 * TP * Math.random();
          afo2[i] = 1 - 2 * TP * Math.random();
        }
        
        var speed = 3200;
        
        var Node = function (pn, idx) {
          this.level = pn ? pn.level + 1 : 0;
          this.aos = 0.3 - 0.6 * Math.random();
          this.r = pn ? 0.90 * pn.r : 60;
          this.a0 = 0;
          this.setPosition = at => {
            if (pn) {
              let lp1 = Math.pow(this.level + 1, 0.8);
              let lp2 = 0.7 * this.level + 1; //this.level+1;
              this.a = pn.a + lp2 * af[idx] * TP * Math.sin(8 * (at + TP * t / speed)); //+aos2[idx]);//+this.aos;
              this.x = pn.x + this.r * Math.cos(this.a);
              this.y = pn.y + this.r * Math.sin(this.a);
            } else {
              this.a = at;
              this.r = 2;
              this.x = this.r * Math.cos(this.a);
              this.y = this.r * Math.sin(this.a);
            }
          };
        };
        
        const pf = 0.24; // 0.23 flatt
        
        var Arm = function (idx) {
          let at = TP * idx / armCount;
          this.na = [new Node(0, 0)];
          this.na[0].x = 80 * Math.random();
          for (let i = 0; i < nodeCount; i++) {
            let nn = new Node(this.na[i], i + 1);
            this.na.push(nn);
          }
          this.setPath = () => {
    .........完整代码请登录后点击上方下载按钮下载查看