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.........完整代码请登录后点击上方下载按钮下载查看