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;
          }
        };
        
        var hues = [];
        var getHues = () => {
          let h = [];
          let hueCount = 4;
          let hr = Math.round(90 / hueCount);
          let hue = getRandomInt(0, 90, true) + 30;
          for (let i = 0; i < hueCount; i++) {
            let hd = Math.round(240 / hueCount) * i + getRandomInt(-hr, hr);
            h.splice(getRandomInt(0, h.length + 1), 0, (hue + hd) % 360);
          }
          return h;
        };
        hues = getHues();
        
        function start() {
          if (stopped) {
            requestAnimationFrame(animate);
            stopped = false;
          } else {
            stopped = true;
          }
        }
        ctx.canvas.addEventListener("click", start, false);
        
        var stopped = true;
        var t = 0;
        var duration = 6000;
        function animate(ts) {
          if (stopped) return;
          t++;
          if (t % (duration / 2) == duration / 4) randomize();
          setLines();
          if (t % 10 == 0) for (let i = 0; i < hues.length; i++) hues[i] = ++hues[i] % 360;
          draw();
          requestAnimationFrame(animate);
        }
        
        onresize();
        var C = 8;
        var R = 360;
        
        var Line = function (idx) {
          this.a = idx * TP / C + (C / 4 - 1) * TP / C / 2;
          this.ad = 0;
          this.fd = 0;
          this.r = R;
          this.rd = 0;
          this.rot = 0;
          this.dp1 = new DOMPoint();
          this.dp2 = new DOMPoint();
          this.setLine = () => {
            let f = 2 / C + this.fd;
            this.dp1.x = (R + this.rd) * Math.cos(this.a + this.ad - f);
            this.dp1.y = (R + this.rd) * Math.sin(this.a + this.ad - f);
            this.dp2.x = (R + this.rd) * Math.cos(this.a + this.ad + f);
            this.dp2.y = (R + this.rd) * Math.sin(this.a + this.ad + f);.........完整代码请登录后点击上方下载按钮下载查看