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 = 2 * CSIZE;
          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 colors = [];
        var getColors = () => {
          let c = [];
          let colorCount = getRandomInt(2, 7);
          let hr = Math.round(90 / colorCount);
          let hue = getRandomInt(0, 90, true) + 30;
          for (let i = 0; i < colorCount; i++) {
            c.splice(getRandomInt(0, c.length + 1), 0, "black");
            let hd = Math.round(240 / colorCount) * i + getRandomInt(-hr, hr);
            let sat = 60 + getRandomInt(0, 41);
            let lum = 40 + getRandomInt(0, 41);
            c.splice(getRandomInt(0, c.length + 1), 0, "hsl(" + (hue + hd) % 360 + "," + sat + "%," + lum + "%)");
          }
          return c;
        };
        colors = getColors();
        
        var getMatrixArray = n => {
          let ua = [];
          for (let i = 0; i < n; i++) {
            let z = i * TP / n;
            ua.push(new DOMMatrix([Math.cos(z), Math.sin(z), -Math.sin(z), Math.cos(z), 0, 0]));
            ua.push(new DOMMatrix([Math.cos(z), Math.sin(z), Math.sin(z), -Math.cos(z), 0, 0]));
          }
          return ua;
        };
        
        const m4 = getMatrixArray(4);
        const m5 = getMatrixArray(5);
        const m6 = getMatrixArray(6);
        const m8 = getMatrixArray(8);
        const m9 = getMatrixArray(9);
        const m10 = getMatrixArray(10);
        const m12 = getMatrixArray(12);
        const m15 = getMatrixArray(15);
        const m16 = getMatrixArray(16);
        const m18 = getMatrixArray(18);
        const m20 = getMatrixArray(20);
        
        const symArrays = [
        [m4, m8, m16],
        [m4, m12],
        [m12, m6], // not currently selecting lower index?
        [m6, m18],
        [m9, m18],
        [m4, m20],
        [m5, m10, m20],
        [m5, m15]];
        
        
        const arr3 = [[3, 0, 0], [2, 1, 0], [1, 1, 1]]; // enhance single-symmetry sets
        const arr2 = [[2, 0], [1, 1]];
        
        var syms = [];
        var symType = 0;
        var setSymmetries = () => {
          let ss = syms.reduce((a, aa) => {return a + aa.length;}, 0);
          if (symType == 1) {
            if (ss == 16) {
              if (Math.random() < 0.5) symType = 0;else
              symType = 5;
            } else if (ss == 48) {
              symType = 2;
            }
          } else if (symType == 2) {
            if (ss == 24) {
              symType = 3;
            } else if (ss == 48) {
              symType = 1;
            }
          } else if (symType == 3) {
            if (ss == 24) {
              symType = 2;
            } else if (ss == 72) {// [m6,m18];
              symType = 4;
            }
          } else if (symType == 4) {// [m9,m18],
            if (ss == 72) {
              symType = 3;
            .........完整代码请登录后点击上方下载按钮下载查看