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);
        
        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 os = [];
        var osr = Math.random() / 200;
        var osr2 = Math.random() / 200;
        var osr3 = Math.random() / 200;
        var setOffsets = () => {
          os = [];
          for (let i = 0; i < 4; i++) {// c-x-c-x
            let ss = 0.001;
            if (i == 2) {
              ss = os[0];
            } else {
              ss = Math.random() / 250;
            }
            os.push(ss);
            os.push(-ss);
          }
          osr = Math.random() / 200;
          osr2 = Math.random() / 200;
          osr3 = Math.random() / 200;
        };
        setOffsets();
        
        const Radii = { // count from CSIZE to 0
          a1: TP * Math.random(),
          a2: TP * Math.random(),
          a3: TP * Math.random(),
          r1: 0,
          r2: 0,
          r3: 0,
          move: () => {
            Radii.a1 += osr;
            if (Radii.a1 > TP) Radii.a1 = Radii.a1 - TP;
            Radii.r1 = 80 + (CSIZE - 140) * (1 + Math.sin(Radii.a1)) / 2;
            Radii.a2 += osr2;
            if (Radii.a2 > TP) Radii.a2 = Radii.a2 - TP;
            Radii.r2 = 60 + (Radii.r1 - 120) * (1 + Math.sin(Radii.a2)) / 2;
            Radii.a3 += osr3;
            if (Radii.a3 > TP) Radii.a3 = Radii.a3 - TP;
            Radii.r3 = 40 + (Radii.r2 - 100) * (1 + Math.sin(Radii.a3)) / 2;
          } };
        
        
        const TBez = function (idx) {
          this.a = TP * idx / COUNT + TP * 3 / 64; // C32 by 8 rotations	c-x-c-x
          this.move = () => {
            this.a += os[idx % 8];
            if (this.a > TP) this.a = this.a - TP;
            if (this.a < 0) this.a = this.a + TP;
            let xf = Math.cos(this.a);
            let yf = Math.sin(this.a);
            this.x0 = CSIZE * xf;
            this.y0 = CSIZE * yf;
            this.x1 = Radii.r1 * xf;
            this.y1 = Radii.r1 * yf;
 .........完整代码请登录后点击上方下载按钮下载查看