多彩泡泡上浮粒子动画-html代码-BFW代码库

多彩泡泡上浮粒子动画

代码语言：html

所属分类：粒子

代码描述：多彩泡泡上浮粒子动画

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

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

<style>
body {
  margin: 0;
}
canvas {
  display: block;
  cursor: pointer;
}
</style>

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

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
<script>
function App() {
  let width, height;
  const canvas = document.getElementById('canvas'),context = canvas.getContext('2d');

  const NUM_BUBBLES = 1000;
  const bubbles = [];
  let cscale = chroma.scale([chroma.random(), chroma.random()]);

  init();

  function init() {
    onResize();
    window.addEventListener('resize', onResize, false);

    for (let i = 0; i < NUM_BUBBLES; i++) {
      initBubble(i);
    }

    document.addEventListener('click', () => {
      cscale = chroma.scale([chroma.random(), chroma.random()]);
    });

    animate();
  }

  function initBubble(i) {
    if (!bubbles[i]) bubbles[i] = { i };

    const b = bubbles[i],
    r = 1 + rnd() * 20,
    x = rnd() * width,
    dx = rnd(10, 20);

    b.r = r;
    b.x = x .........完整代码请登录后点击上方下载按钮下载查看