canvas-confetti 组件

canvas-confetti 是一个 JavaScript 库，它使用 HTML5 Canvas API 来创建动画纸屑（confetti）效果。这个库允许开发者在网页或应用程序中轻松地添加庆祝性的视觉效果，比如当用户完成某个成就、达到里程碑或者仅仅是为了增加一些乐趣。

https://www.kirilv.com/canvas-confetti/

以下是一些关于如何使用 canvas-confetti 组件的关键点：

基本用法

你可以通过调用 confetti() 函数来触发默认的纸屑效果，如下所示：

confetti();

这会以默认设置发射纸屑，通常是从屏幕顶部向下散开。

自定义参数

你可以传递一个对象给 confetti() 函数来自定义纸屑的行为和外观。例如，你可以指定粒子的数量、分散角度、起始位置等：

confetti({
  particleCount: 100, // 粒子数量
  spread: 70,        // 分散角度
  origin: { y: 0.6 } // 起始位置 (y坐标)
});

随机方向

如果你想让纸屑朝向随机方向发射，可以动态生成参数：

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

confetti({
  angle: randomInRange(55, 125),
  spread: randomInRange(50, 70),
  particleCount: randomInRange(50, 100),
  origin: { y: 0.6 }
});

自定义画布

如果你不想让纸屑遍布整个页面，而是想限制它们出现在特定区域内，你可以提供自己的 <canvas> 元素，并初始化 canvas-confetti：

var canvas = document.getElementById('my-canvas');
canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });
canvas.confetti({ spread: 70, origin: { y: 1.2 } });

创建自定义形状

除了标准的纸屑形状外，canvas-confetti 还支持从文本或路径创建自定义形状。例如，这里是如何创建一个独角兽表情符号作为纸屑粒子的例子：

var scalar = 2;
var unicorn = confetti.shapeFromText({ text: '🦄', scalar });

var defaults = {
  spread: 360,
  ticks: 60,
  gravity: 0,
  decay: 0.96,
  startVelocity: 20,
  shapes: [unicorn],
  scalar
};

function shoot() {
  confetti({ ...defaults, particleCount: 30 });
  confetti({ ...defaults, particleCount: 5, flat: true });
  confetti({ ...defaults, particleCount: 15, scalar: scalar / 2, shapes: ['circle'] });
}

setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);

这段代码将创建一个带有独角兽表情符号的纸屑效果，并且会在不同时间点多次发射，创造出更丰富的视觉体验。

通过这些方法，你可以根据自己的需求定制出独特的纸屑动画效果。