五彩纸屑特效JS插件快速使用
突然想给树洞做一个发布的时候来一个撒花效果，但是自己做没有什么思路，然后就在 GitHub 冲浪的时候发现了这个 JS 库，这就是我想要的效果，这是我的梦中情库！GitHub 上目前已有5.9k Star
项目地址：catdad/canvas-confetti: 🎉 performant confetti animation in the browser (github.com)
这个项目提供了非常多的五彩纸屑的效果，效果都是特别好的，而且代码也是开源的。
安装方式：
常规 NPM 安装
1
npm install --save canvas-confettiJS 引用
1
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>接下来我会进行展示插件的所有效果，由于原作者的网站是英文，所以我扒了官方网站的代码并进行了中文翻译展示在下面，所有效果都可以复制代码方便进行调用。
你可以访问 canvas confetti 以进行全屏浏览。
我这里只使用到了 JS 引用的方式进行说明，因为这个方便快速，而且源代码体积也特别小，加载速度比较快。
开源伟大！
接下来就是在代码中进行调用。
我这里以 HTML 代码为例。
- 首先在项目中引用外部 JS 文件。
- 随便找一个效果,随便定义一个函数，把代码放到函数内。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function a() {
var count = 200;
var defaults = {
origin: { y: 0.7 },
};
function fire(particleRatio, opts) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
});
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8,
});
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2,
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
}- 页面中添加一个按钮，调用该函数。
1
<button id="btn" onclick="a()">开始</button>- 打开页面调试，单击按钮，显示效果
别的效果更改例子代码即可。