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.lineCap = "round";
        
        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;
        };
        
        function cFrac(frac) {
          var e2 = 3 * frac * Math.pow(1 - frac, 2) * 0.2;
          var e3 = 3 * (1 - frac) * Math.pow(frac, 2) * 0.8;
          var e4 = Math.pow(frac, 3);
          return e2 + e3 + e4;
        }
        
        var hues = [];
        var colors = new Array(4);
        var getHues = () => {
          let h = [];
          let hueCount = 3;
          let hue = getRandomInt(0, 200);
          for (let i = 0; i < hueCount; i++) {
            let hd = (hue + Math.round(240 / hueCount) * i + getRandomInt(-10, 10)) % 360;
            h.splice(getRandomInt(0, h.length + 1), 0, hd);
          }
          return h;
        };
        
        var setColors = () => {
          colors[0] = "hsl(" + hues[0] + ",100%,80%)";
          colors[1] = "hsl(" + hues[1] + ",100%,80%)";
          colors[2] = "hsl(" + hues[2] + ",100%,80%)";
        };
        
        var Axis = function (idx) {
          this.pts = new Array(PC);
          this.pts2 = new Array(PC);
          this.dof = TP * Math.random();
          this.dof2 = TP * Math.random();
          this.setPoints = () => {
            for (let i = 0; i < PC; i++) {
              let r = CSIZE * i / (PC - 1);
              let ri = Math.trunc(idx * axFactors[i].length / lineCount);
              let xf = axFactors[i][ri].x;
              let yf = axFactors[i][ri].y;
              this.pts[i] = { "x": xf * r, "y": yf * r, "c1x": xf * (r - CD), "c1y": yf * (r - CD), "c2x": xf * (r + CD), "c2y": yf * (r + CD) };
              let xf2 = axFactors2[i][ri].x;
              let yf2 = axFactors2[i][ri].y;
              this.pts[i] = { "x": xf * r, "y": yf * r, "c1x": xf * (r - CD), "c1y": yf * (r - CD), "c2x": xf * (r + CD), "c2y": yf * (r + CD) };
              this.pts2[i] = { "x": xf2 * r, "y": yf2 * r, "c1x": xf2 * (r - CD), "c1y": yf2 * (r - CD), "c2x": xf2 * (r + CD), "c2y": yf2 * (r + CD) };
            }
          };
          this.setPoints();
          this.getPath = () => {
            let p = new Path2D();
            p.moveTo(this.pts[0].x, this.pts[0].y);
            for (let i = 0; i < this.pts.length - 1; i++) {
              let x2 = (1 - frac) * this.pts[i + 1].x + frac * this.pts2[i + 1].x;
              let y2 = (1 - frac) * this.pts[i + 1].y + frac * this.pts2[i + 1].y;
              let c1x = (1 - frac) * this.pts[i].c2x + frac * this.pts2[i].c2x;
              let c1y = (1 - frac) * this.pts[i].c2y + frac * this.pts2[i].c2y;
              let c2x = (1 - frac) * this.pts[i + 1].c1x + frac * this.pts2[i + 1].c1x;
              let c2y = (1 - frac) * this.pts[i + 1].c1y + frac * this.pts2[i + 1].c1y;
              p.bezierCurveTo(c1x, c1y, c2x, c2y, x2, y2);
            }
.........完整代码请登录后点击上方下载按钮下载查看