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 ca = []; // circle array
        
        var Circle = function (idx) {
          this.a = 0;
          this.a2 = 0; // location radius angle
          this.cca = [];
          this.inc = 2400 + 1200 * getRandomInt(0, 3);
          if (idx % 2) this.inc = -this.inc;
          this.inc2 = 6400 + 3200 * getRandomInt(0, 3);
          ca.push(this);
          this.move = q => {
            this.a += q * TP / this.inc;
            this.a2 += q * TP / this.inc2;
            let rz = 340 * Math.pow(Math.sin(this.a2), 2);
            this.x = rz * Math.cos(this.a);
            this.y = rz * Math.sin(this.a);
          };
          this.setPath = () => {
            this.path = new Path2D();
            this.path.arc(this.x, this.y, this.r, 0, TP);
          };
          this.setRadius = r => {
            this.r = r;
            this.path = new Path2D();
            if (r > 0) this.path.arc(this.x, this.y, r, 0, TP);
          };
        };
        
        const WID = 16;
        ctx.lineWidth = WID;
        
        var draw = () => {
          ctx.clearRect(-CSIZE, -CSIZE, 2 * CSIZE, 2 * CSIZE);
          for (let i = 0; i < ca.length; i++) {
            ctx.beginPath();
            let dr = ca[i].r - WID / 2;
            if (dr > 0) {
          .........完整代码请登录后点击上方下载按钮下载查看