漂亮的动态气泡背景效果bubbly-bg.js

bubbly-bg.js是一款漂亮的动态气泡背景js插件。它是基于HTML5 canvas，压缩后的版本小于1kb，但是它能制作出各种漂亮的动态气泡背景效果，非常强大。

默认的效果

HTML结构

如果你不指定<canvas>元素作为容器，而是直接在body中初始化插件，那么插件会在body之后创建一个<canvas>元素，这个元素具有position: fixed和z-index: -1属性，并且它的宽度和高度始终会等于视口的宽度和高度。例如：

<body>
 <!-- 已经下载到本地 -->
 <script src="js/bubbly-bg.js"></script>
 <script>bubbly();</script>
</body>

如果还没有下载，打开bubbly-bg.js将里面的内容复制，保存到本地文件命名bubbly-bg.js如上引用即可

如果你不想下载也可以直接使用这种方式：

<body>
  <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

你也可以指定一个<canvas>作为动态气泡背景的容器。例如：

<canvas id="demo" width="400" height="300"></canvas>
<!-- 初始化 -->
<script>
    bubbly({
      canvas: document.getElementById("demo")
    });
</script>

它有这四种效果，可以通过配置参数实现：

第一种：

bubbly();

第二种：

bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});

第三种：

bubbly({
    colorStart: "#4c004c",
    colorStop: "#1a001a",
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});

第四种：

bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});

还有两种效果从github中找到的

bubbly({
  blur:15,
  colorStart: '#194167',
  colorStop: '#112144',
  radiusFunc:() => 5 + Math.random() * 15,
  angleFunc:() => -Math.PI / 2,
  velocityFunc:() => Math.random() * 7.5,
  bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 65%, .1)`,
  bubbles:350
});

bubbly({
  colorStart: '#d5d5d5',
  colorStop: '#d5d5d5',
  bubbles:400,
  blur:1,
  compose: 'source-over',
  bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 50%, .3)`,
  angleFunc:() => Math.random() > 0.5 ? Math.PI : 2 * Math.PI,
  velocityFunc:() => 1 + Math.random() * 10,
  radiusFunc:() => Math.random() * 5
});

该插件的GitHub地址https://github.com/tipsy/bubbly-bg

Q.E.D.