涟漪粒子动画效果-html代码-BFW代码库

涟漪粒子动画效果

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Witches&#39; Brew</title>
<style>
      body {
  overflow: hidden;
  background: linear-gradient(to right, hsl(272, 76%, 16%), #572584);
  min-height: 100vh;
}

#canvas {
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*border-radius: 50%;*/
  background: hsl(272, 76%, 16%);
}

    </style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script src='http://repo.bfw.wiki/bfwrepo/js/qzgbqx.js'></script>
<script>
      //stats: https://codepen.io/giaco/pen/qzgbqx.js
let stats = new Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);

let ctx = canvas.getContext("2d");
let cw = canvas.width = window.innerWidth,
ch = canvas.height = window.innerHeight;

let rid = null; // request animation id

let numParticles = 1000;
let baseSpeed = 2;

let size = 5; //vector size
let k = 0.008; // change cell size
let rows = ~~(ch / size) + 2;
let cols = ~~(cw / size) + 2;

let flowField = [];

class Particle {
  constructor(i) {
    this.i = i;
    this.pos = { x: Math.random() * cw, y: Math.random() * ch };
    this.vel = { x: 0, y: 0 };
    this.base = (1 + Math.random()) .........完整代码请登录后点击上方下载按钮下载查看