如何创建五彩纸屑效果
前言
很多网站会在一些按钮上面加上不同的动画效果，这些动感的效果能够更加容易的创建具有视觉吸引力的用户界面。
本文将介绍一个小巧的 JavaScript 库，它能够用非常短的时间以及简短的代码量创建我们想要的五彩纸屑效果
简单使用
我们可以通过 npm 安装或从 cdn 导入两种方式来使用这个库。
这里我采用的是导入的方式。
在你导入完成这个库之后，我们需要一个按钮
<button onclick="myClick()">button</button>
最简单的特效只需要在点击函数当中调用 confetti 函数即可
function myClick () {
confetti()
}
细节配置参数
通过传入 options 属性，我们可以在特效上自定义很多我们需要的部分，下面是部分配置属性的作用，后面我们会挑出部分属性来展示一下效果：
| 属性名 | 作用 |
|---|---|
particleCount | 飞出的纸屑的数量，默认 50 |
angle | 飞出的纸屑的角度 90 是向上，默认 90 |
spread | 飞出的纸屑偏离中心的角度，默认 45 |
startVelocity | 飞出的纸屑的初始速度，默认 45 |
decay | 飞出的纸屑的减速度，范围 0-1 之间，默认 0.9 |
gravity | 重力，默认 1 |
decay | 飞出的纸屑的减速度，范围 0-1 之间，默认 0.9 |
flat | 是否关闭纸屑的翻转，默认 false |
ticks | 纸屑消失速度，默认 200 |
origin | 对象，设置发射纸屑的原点，有 x y 两个参数，取值都是 0 - 1 对应上下边缘，默认 0.5 0.5 |
colors | 数组：十六进制格式的颜色字符串数组 |
shapes | 数组：纸屑的形状 |
scalar | 每个五彩纸屑粒子的比例，默认 1 |
zIndex | 纸屑的z-index，默认 100 |
disableForReducedMotion | 禁用五彩纸屑，默认 false |
根据上面的参数，你可以很容易的定义自己想要的效果，下面我们随意定义部分例子：
<body>
<button onclick="myClick1()">左倾斜</button>
<button onclick="myClick2()">全是黑色</button>
<button onclick="myClick3()">数量很多多多</button>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>
<script>
function myClick1 () {
confetti({
angle: 135,
});
}
function myClick2 () {
confetti({
colors: ['#000000']
});
}
function myClick3 () {
confetti({
particleCount: 500,
});
}
</script>
</body>
详细定义纸屑形状
在上面的配置当中我们已经可以定义纸屑的大部分配置，其中 shapes 可以用于定义纸屑的形状，官方为我们预留了三个形状 'square', 'circle', 'star' 分别对应 方形，圆形，星星，这个字段传入的是一个数组，这个数组中元素的数量，决定了这个形状在所有纸屑中的比例，比如说你要是传入了 ['square', 'circle', 'star'] 那么三种形状就都是占比三分之一。
除了通过官方预留的形状，我们还可以通过两个函数来进行形状自定义，分别是 confetti.shapeFromPath 和 confetti.shapeFromText
confetti.shapeFromPath
这个函数可以传入一个对象，对象中存在一个 path 的 key，这个就决定了创建出来的形状长什么样子
下面的代码可以创建一个三角形的纸屑
var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });
confetti({
shapes: [triangle],
});
confetti.shapeFromText
这个函数同样传入一个对象，对象存在 text 和 scalar ， text 可以传入任何文字，甚至是一些文字表情也可以使用， scalar 配合 options 的 scalar 使用，两个相差过大会导致字体变得很模糊。
下面的代码你就可以创建一个字符串纸屑
var scalar = 2;
var pineapple = confetti.shapeFromText({ text: '🍍🍍🍍', scalar });
confetti({
shapes : [pineapple],
scalar,
});
逻辑事件
纸屑在生成的时候，我们可以会需要一些事件，比如说在我们想要的时候清除掉屏幕上还未消失的纸屑，又或者在一次纸屑彻底消失的时候执行某些逻辑。
消除纸屑
我们可以通过调用 confetti.reset(); 来消除屏幕上的纸屑
监听纸屑消失事件
在我们调用 confetti() 的时候会返回一个 promise 对象，这个对象将会在纸屑完全消失的时候回调。
自定义纸屑产生的位置
在上面的例子当中，我们可能会发现，纸屑都只能在屏幕的正中心产生，这是因为 options 里的 origin 属性的默认值，我们可以通过一些方式来自定义这个产生的位置
动态设置 origin
我们可以通过动态的来设置这个值来做到自定义产生的位置。
在点击事件当中，我们能够拿到当前的点击对象，通过这个 event 对象以及 window 上获取到可视区域的宽高，我们不难算出当前按钮相对于左右的位置。
const windowHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
// 获取浏览器高度
const windowWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
// 获取浏览器宽度
const origin = {
x: event.pageX/windowWidth,
y: event.pageY/windowHeight,
}
// 获取比例
自定义 canvas
官方支持我们创建自定义画布的 confetti 实例，这样创建的 confetti 不会超出定义的这个画布的范围，这在某些时候可能会起到很重要的作用。
并且官方强调了，一个画布最好只和一个 confetti 实例做关联，所以说当我们创建多个 confetti 实例的时候，就也需要创建多个画布。
因为是自定义添加的画布，所以我们需要在不需要的时候手动去删除这个画布，避免产生多余的元素。
var myCanvas = document.createElement('canvas');
var container = document.querySelector('.container')
container.appendChild(myCanvas)
var myConfetti = confetti.create(myCanvas).then(()=>{
container.removeChild(myCanvas)
});
然后设定位置的操作我这里就不多做了，只需要定义这个 canvas 的生成位置就好了。
示例代码
来源：juejin.cn/post/7290769553572397056
