catdad.github.io/canvas-confetti
您可以将此模块作为 NPM 中的组件安装：
npm install --save canvas-confetti
然后，你可以 require（'canvas-confetti';） 在你的项目构建中使用它。注意：这是一个客户端组件，不会在 Node 中运行。你需要用 webpack 之类的东西来构建你的项目才能使用它。
您还可以直接从 CDN 将此库包含在 HTML 页面中：
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
注意：您应该在包含项目时使用最新版本。您可以在 releases 页面上查看所有版本。
感谢您和我一起讨论关于您网站上运动的非常重要的信息。你看，不是每个人都喜欢它，有些人实际上更喜欢不动。他们有办法告诉我们，我们应该倾听。虽然我不想告诉你现在不要在你的页面上有五彩纸屑，但我确实想让你很容易尊重你的用户想要的东西。您可以使用一个 disableForReducedMotion 选项，这样对混乱动画有问题的用户就不需要在您的网站上苦苦挣扎。默认情况下，这是禁用的，但我正在考虑在未来的主要版本中更改它。如果您对此有强烈的感受，请告诉我。现在，请负责任地使用五彩纸屑。
从 npm 安装时，此库可能需要作为项目构建中的客户端组件。使用 CDN 版本时，它会在 window 上显示为五彩纸屑函数。
confetti([options {Object}]) → Promise|nullconfetti 接受一个可选对象。当窗口。Promise 可用，它将返回一个 Promise 以通知您何时完成。当 promise 不可用时（就像在 IE 中一样），它将返回 null。你可以使用任何流行的 polyfill 对 promise 进行 polyfill。您还可以通过以下方式为 confetti 提供 promise 实现：
const MyPromise = require('some-promise-lib');
const confetti = require('canvas-confetti');
confetti.Promise = MyPromise;
如果你在完成之前多次调用 confetti ，它每次都会返回相同的 promise。在内部，将重复使用相同的 canvas 元素，继续添加新五彩纸屑的现有动画。每次调用 confetti 返回的 promise 将在所有动画完成后解析。
confetti 参数是一个可选的 options 对象，它具有以下属性：
confetti.shapeFromPath({ path, matrix? }) → Shape此帮助程序方法允许您使用 SVG 路径字符串创建自定义五彩纸屑形状。任何有效的路径都应该有效，但有一些注意事项：
这个方法将返回一个 Shape —— 它实际上只是一个具有一些属性的普通对象，但是 shhh...我们将假装它是一个形状。将此 Shape 对象直接传递到 shapes 数组中。
例如，以下是制作三角形五彩纸屑的方法：
var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });
confetti({
shapes: [triangle]
});
confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape这是备受期待的渲染表情符号五彩纸屑的功能！使用任何标准的 Unicode 表情符号。或其他文本，但是......也许不要使用其他文本。
虽然任何文本都应该可以工作，但也有一些注意事项：
此方法的选项包括：
var scalar = 2;
var pineapple = confetti.shapeFromText({ text: '🍍', scalar });
confetti({
shapes: [pineapple],
scalar
});
confetti.create(canvas, [globalOptions]) → function此方法创建使用自定义画布的 confetti 函数的实例。如果要限制页面上出现五彩纸屑的区域，这将非常有用。默认情况下，此方法不会以任何方式修改画布（除了绘制到画布）。
不过，Canvas 可能会被误解一些，所以让我解释一下为什么你可能想让模块稍微修改一下 canvas。默认情况下， 画布是一个相对较小的图像 -- 大约 300x150，具体取决于浏览器。当您使用 CSS 调整其大小时，这将设置画布的显示大小，但不设置该画布上表示的图像。可以将其视为在 img 标签中加载 300x150 jpeg 图像，然后将该标签的 CSS 设置为 1500x600 -- 您的图像最终会变得拉伸和模糊。对于画布，您还需要设置画布图像本身的宽度和高度。如果您不想这样做，您可以允许 Confetti 为您设置它。
另请注意，您应该保留自定义实例，并避免多次初始化具有相同 canvas 元素的五彩纸屑实例。
以下全局选项可用：
重要提示：如果您使用 useWorker： true，则我现在拥有您的 Canvas。它现在是我的了，我可以用它做任何我想做的事情（别担心......我保证，我只会在里面放五彩纸屑）。您不得尝试以任何方式使用画布（除了我猜将其从 DOM 中删除），因为它会引发错误。 当使用 worker 进行渲染时，画布的控制权必须转移给 Web worker，以防止在主线程上使用该画布。如果必须以任何方式作画布，请不要使用此选项。
var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
var myConfetti = confetti.create(myCanvas, {
resize: true,
useWorker: true
});
myConfetti({
particleCount: 100,
spread: 160
// any other options from the global
// confetti function
});
confetti.reset()停止动画并清除所有五彩纸屑，并立即解决任何未完成的承诺。如果使用 confetti.create 创建单独的 confetti 实例，则该实例将具有自己的 reset 方法。
confetti();
setTimeout(() => {
confetti.reset();
}, 100);
var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
var myConfetti = confetti.create(myCanvas, { resize: true });
myConfetti();
setTimeout(() => {
myConfetti.reset();
}, 100);
以默认方式启动一些五彩纸屑：
confetti();
发射一堆五彩纸屑：
confetti({
particleCount: 150
});
发射一些非常宽的五彩纸屑：
confetti({
spread: 180
});
发挥创意。从页面的随机部分发射一小堆五彩纸屑：
confetti({
particleCount: 100,
startVelocity: 30,
spread: 360,
origin: {
x: Math.random(),
// since they fall down, start a bit higher than random
y: Math.random() - 0.2
}
});
我说的是创意......我们可以做得更好。由于我们叫五彩纸屑多少次并不重要（只是空气中五彩纸屑的总数），我们可以做一些有趣的事情，比如在 30 秒内从多个方向连续发射越来越多的五彩纸屑：
// do this for 30 seconds
var duration = 30 * 1000;
var end = Date.now() + duration;
(function frame() {
// launch a few confetti from the left edge
confetti({
particleCount: 7,
angle: 60,
spread: 55,
origin: { x: 0 }
});
// and launch a few from the right edge
confetti({
particleCount: 7,
angle: 120,
spread: 55,
origin: { x: 1 }
});
// keep going until we are out of time
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());