我们先安装npm依赖：
npm install --save canvas-confetti
然后在项目中import：
import confetti from "canvas-confetti";
此时canvas-confetti可能会报错未声明，我们需要去src目录下新建文件，文件名为declaration.d.ts，文件中声明：
declare module 'canvas-confetti';
接下来我们可以引入：
const CanvasConfetti = function () {
const canvas = document.querySelector(".confetti");
try {
const myConfetti = confetti.create(canvas, {
resize: true,
useWorker: true,
});
myConfetti({
particleCount: 20,
spread: 55,
angle: 60,
origin: { x: 0 },
});
myConfetti({
particleCount: 20,
spread: 55,
angle: 120,
origin: { x: 1 },
});
} catch (error) {
console.log(error);
}
return (
<canvas />
);
}
此处您可以看见一个屏幕两侧向中间撒花的效果，如果您需要修改样式，可以参照以下的参数进行修改：
-
particleCount整数（默认值：50） ：要发射的五彩纸屑的数量。 -
angleNumber（默认值：90） ：发射五彩纸屑的角度，以度为单位。90是直线上升的。 -
spread数字（默认值：45） ：五彩纸屑可以偏离中心多远，以度为单位。45 表示五彩纸屑将以定义的angle正负 22.5 度发射。 -
startVelocity数字（默认值：45） ：五彩纸屑开始移动的速度，以像素为单位。 -
decay数字（默认值：0.9） ：五彩纸屑失去速度的速度。将此数字保持在 0 和 1 之间，否则五彩纸屑会加快速度。 -
gravity数字（默认值：1） ：粒子被拉下的速度。1 是全重力，0.5 是半重力等，但没有限制。如果你愿意，你甚至可以让粒子上升。 -
drift数字（默认值：0） ：五彩纸屑会飘到一边。默认值为 0，这意味着它们将直接下降。对左使用负数，对右使用正数。 -
ticksNumber (default: 200) : 五彩纸屑会移动多少次。如果五彩纸屑对你来说消失得太快，可以尝试使用。 -
origin对象 ：从哪里开始发射五彩纸屑。origin.xNumber（默认值：0.5） ：x页面上的位置，0左边缘和1右边缘。origin.yNumber (default: 0.5) :y页面上的位置，0上边缘和1下边缘。
-
colorsArray ：颜色字符串数组，采用 HEX 格式，比如['#bada55']. -
shapesArray ：五彩纸屑的形状数组。可能的值为square和circle。默认设置是均匀混合使用这两种形状。您甚至可以通过提供一个值来更改组合，例如['circle', 'circle', 'square']使用两个三分之一的圆圈和三分之一的正方形。 -
scalar数字（默认值：1） ：每个五彩纸屑颗粒的比例因子。使用小数使五彩纸屑变小。 -
zIndex整数（默认值：100） -
disableForReducedMotion布尔值（默认值：false） ：为喜欢减少发射频率的用户完全禁用五彩纸屑。
以下全局选项可用：
resizeBoolean (default: false) : 是否允许设置画布图像大小。默认情况下，不会修改画布大小。useWorkerBoolean (default: false) : 是否尽可能使用异步 web worker 来渲染五彩纸屑动画。默认情况下这是关闭的，这意味着动画将始终在主线程上执行。disableForReducedMotion*布尔值（默认值：false）
