js实现canvas利萨茹(Lissajous)曲线粒子运行动画效果代码-html代码-BFW代码库

js实现canvas利萨茹(Lissajous)曲线粒子运行动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas利萨茹(Lissajous)曲线粒子运行动画效果代码，点击左键更换效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body, html {
          margin: 0;
        }
        
        canvas {
          display: block;
        }
    </style>


</head>

<body>
    <canvas id="canvas"></canvas>



    <script>
        /*
          Johan Karlsson, 2021
          https://twitter.com/DonKarlssonSan
          MIT License, see Details View
        */
        const colors = [
        "orange",
        "black",
        "gray",
        "purple"];
        
        
        class Particle {
          constructor() {
            this.rot = Math.random() * Math.PI * 2;
            this.r = Math.random() * Math.min(w, h) * 0.09;
            this.offset = Math.random() * 0.6;
            this.tail = [];
            let i = Math.floor(Math.random() * colors.length);
            this.color = colors[i];
          }
        
          move(now) {
            let t = now * curveSpeed + this.offset;
            let xrot = Math.cos(this.rot) * this.r;
            let yrot = Math.sin(this.rot) * this.r;
            let x = A * Math.sin(a * t + δ) + xrot;
            let y = B * Math.sin(b * t) + yrot;
        
            this.rot += rotationSpeed;
            this.tail.push([x, y]);
            if (this.tail.length > tailLength) {
              this.tail.splice(0, 1);
            }
          }
        
          draw(ctx, x0, y0) {
            // You want colors? Uncomment below!
            // ctx.strokeStyle = this.color;
            ctx.beginPath();
            this.tail.forEach((point, i) => {
              let rgb = 255 - i / tailLength * 255;
              let [x, y] = point;
              ctx.lineTo(x0 + x, y0 + y);
            });
            ctx.lineTo(x0 + this.x, y0 + this.y);
            ctx.stroke();
.........完整代码请登录后点击上方下载按钮下载查看