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);
        ctx.lineJoin = "round";
        
        onresize = () => {
          let D = Math.min(window.innerWidth, window.innerHeight) - 40;
          ctx.canvas.style.width = 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 hue1 = getRandomInt(0, 31);
        var hue2 = 120 + getRandomInt(0, 30);
        var hue3 = 240 + getRandomInt(0, 30);
        
        var stopped = true;
        var start = () => {
          if (stopped) {
            stopped = false;
            requestAnimationFrame(animate);
          } else {
            stopped = true;
          }
        };
        body.addEventListener("click", start, false);
        
        var t = 0;
        const duration = 2000;
        let m = -1;
        var animate = ts => {
          if (stopped) return;
          if (Math.abs(time[0] - time[1]) > 2400) m *= -1;
          for (let i = 0; i < pointCount; i++) {
            time[i] = time[i] + m * Math.pow(i, 0.3);
            let angle = TP / ds * Math.sin(time[i] * TP / duration);
            fx[i] = Math.cos(angle).........完整代码请登录后点击上方下载按钮下载查看