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");
        })();
        
        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 sq = 2 * CSIZE;
        
        var getImageData = () => {
          let pixd = ctx.createImageData(sq, sq);
          let rm = Math.pow(2, getRandomInt(2, 6, true));
          let gm = Math.pow(2, getRandomInt(2, 6, true));
          let bm = Math.pow(2, getRandomInt(2, 6, true));
          let ro = TP / 4 * getRandomInt(0, 4);
          let go = TP / 4 * getRandomInt(0, 4);
          let bo = TP / 4 * getRandomInt(0, 4);
          let rf = sq / getRandomInt(1, 5);
          let gf = sq / getRandomInt(1, 5);
          let bf = sq / getRandomInt(1, 5);
          for (let i = 0; i < sq; i++) {
            for (let j = 0; j < sq; j++) {
              let x = j - sq / 2;
              let y = i - sq / 2;
              let r = Math.pow(x * x + y * y, 0.5);
              let a = Math.atan2(y, x);
              pixd.data[i * 4 * sq + j * 4] = Math.round(96 + 159 * Math.sin(TP * r / rf + ro) * Math.cos(rm * a));
              pixd.data[i * 4 * sq + j * 4 + 1] = Math.round(96 + 159 * Math.sin(TP * r / gf + go) * Math.cos(gm * a));
              pixd.data[i * 4 * sq + j * 4 + 2] = Math.round(96 + 159 * Math.sin(TP * r / bf + bo) * Math.cos(bm * a));
              pixd.data[i * 4 * sq + j * 4 + 3] = 255;
            }
          }
          return pixd;
        };
        
        var setPattern = n => {
          let pixd = getImageData();
          createImageBitmap(pixd).then(ib => {
            ctx.strokeStyle = ctx.createPattern(ib, "no-repeat");
          });
        };
        
        function start() {
          if (stopped) {
            requestAnimationFrame(animate);
            stopped = false;
          } else {
            stopped = true;
          }
        }
        ctx.canvas.addEventListener("click", start, false);
        
        var rotation = 0;
        var stopped = true;
        var t = 0;
        var duration = 1600;
        function animate(ts) {
          if (stopped) return;
          t++;
 .........完整代码请登录后点击上方下载按钮下载查看