canvas-confetti

演示

catdad.github.io/canvas-confetti

安装

您可以将此模块作为 NPM 的组件安装：

npm install --save canvas-confetti

然后，您可以 require('canvas-confetti');在项目构建中使用它。注意：这是一个客户端组件，不会在 Node.js 中运行。您需要使用webpack 之类的东西来构建您的项目才能使用它。

您还可以直接从 CDN 将这个库包含在您的 HTML 页面中：

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

注意：您应该在包含项目时使用最新版本。您可以在发布页面上查看所有版本。

减少运动

感谢您加入我关于您网站上的动态的非常重要的信息。看，不是每个人都喜欢它，有些人实际上更喜欢不动。他们有办法告诉我们，我们应该倾听。虽然我不想告诉你现在不要在你的页面上放五彩纸屑，但我确实想让你更容易尊重用户的需求。您可以使用一个 disableForReducedMotion选项，这样对混乱动画有问题的用户就不必在您的网站上苦苦挣扎。默认情况下禁用此功能，但我正在考虑在未来的主要版本中更改它。如果您对此有强烈的感受，请告诉我。现在，请负责任地使用五彩纸屑。

API

从 安装时 npm，此库可能需要作为项目构建中的客户端组件。使用 CDN 版本时，它 confetti在 window.

confetti([options {Object}]) → Promise|null

confetti接受一个可选对象。当 window.Promise可用时，它会返回一个 Promise 让你知道它何时完成。当 promise 不可用时（比如在 IE 中），它将返回 null. 你可以使用任何流行的 polyfill 来填充 promise。您还可以通过以下方式提供 Promise 实现 confetti：

const MyPromise = require('some-promise-lib');
const confetti = require('canvas-confetti');
confetti.Promise = MyPromise;

如果你 confetti在它完成之前多次调用，它每次都会返回相同的承诺。在内部，将重复使用相同的画布元素，继续现有动画并添加新的五彩纸屑。每次调用返回的承诺 confetti将在所有动画完成后解决。

options

该 confetti参数是单个可选 options对象，具有以下属性：

• particleCount 整数（默认值：50） ：要发射的五彩纸屑的数量。更多总是很有趣......但要冷静，这涉及到很多数学。
• angle Number（默认值：90） ：发射五彩纸屑的角度，以度为单位。90是直线上升的。
• spread 数字（默认值：45） ：五彩纸屑可以偏离中心多远，以度为单位。45 表示五彩纸屑将以定义的 angle正负 22.5 度发射。
• startVelocity 数字（默认值：45） ：五彩纸屑开始移动的速度，以像素为单位。
• decay 数字（默认值：0.9） ：五彩纸屑失去速度的速度。将此数字保持在 0 和 1 之间，否则五彩纸屑会加快速度。更好的是，永远不要改变它。
• gravity 数字（默认值：1） ：粒子被拉下的速度。1 是全重力，0.5 是半重力等，但没有限制。如果你愿意，你甚至可以让粒子上升。
• drift 数字（默认值：0） ：五彩纸屑会飘到一边。默认值为 0，这意味着它们将直接下降。对左使用负数，对右使用正数。
• ticks Number (default: 200) : 五彩纸屑会移动多少次。这是抽象的......但如果五彩纸屑对你来说消失得太快，请尝试一下。
• origin 对象 ：从哪里开始发射五彩纸屑。如果您愿意，请随意在屏幕外启动。
  • origin.x Number（默认值：0.5） ：x页面上的位置，0左边缘和 1右边缘。
  • origin.y Number (default: 0.5) :y页面上的位置，0上边缘和 1下边缘。
• colors Array ：颜色字符串数组，采用 HEX 格式...你知道，比如 #bada55.
• shapes Array ：五彩纸屑的形状数组。可能的值为 square和 circle。默认设置是均匀混合使用这两种形状。您甚至可以通过提供一个值来更改组合，例如 ['circle', 'circle', 'square']使用两个三分之一的圆圈和三分之一的正方形。
• scalar 数字（默认值：1） ：每个五彩纸屑颗粒的比例因子。使用小数使五彩纸屑变小。继续，试试小小的五彩纸屑，它们很可爱！
• zIndex 整数（默认值：100） ：毕竟五彩纸屑应该在上面。但是如果你有一个疯狂的高页面，你可以将它设置得更高。
• disableForReducedMotion 布尔值（默认值：false） ：为喜欢减少运动的用户完全禁用五彩纸屑。在这种情况下，confetti()承诺将立即解决。

confetti.create(canvas, [globalOptions]) → function

此方法创建 confetti使用自定义画布的函数实例。如果您想限制页面上出现五彩纸屑的区域，这很有用。默认情况下，此方法不会以任何方式修改画布（除了绘制它）。

画布可能会被误解，所以让我解释一下为什么你可能想让模块稍微修改一下画布。默认情况下，a canvas是一个相对较小的图像——大约 300x150，具体取决于浏览器。当您使用 CSS 调整它的大小时，这会设置画布的显示大小，但不会设置该画布上显示的图像。可以将其想象为在标签中加载 300x150 jpeg 图像，img然后将该标签的 CSS 设置为 1500x600-- 您的图像最终会被拉伸和模糊。在画布的情况下，您还需要设置画布图像本身的宽度和高度。如果你不想这样做，你可以允许 confetti为你设置它。

另请注意，您应该保留自定义实例，并避免多次使用相同的画布元素初始化 confetti 实例。

以下全局选项可用：

• resize Boolean (default: false) : 是否允许设置画布图像大小，以及在窗口改变大小时保持正确大小（例如调整窗口大小、旋转移动设备等）。默认情况下，不会修改画布大小。
• useWorker Boolean (default: false) : 是否尽可能使用异步 web worker 来渲染五彩纸屑动画。默认情况下这是关闭的，这意味着动画将始终在主线程上执行。如果打开并且浏览器支持它，动画将在主线程之外执行，这样它就不会阻塞页面需要执行的任何其他工作。使用这个选项也将修改画布，但更多的是直接在下面——请阅读它。如果浏览器不支持，则忽略此值。
• disableForReducedMotion 布尔值（默认值：false） ：为喜欢减少运动的用户完全禁用五彩纸屑。当设置为 true 时，使用此五彩纸屑实例将始终尊重用户减少运动的请求并为他们禁用五彩纸屑。

重要提示：如果您使用 useWorker: true，我现在拥有您的画布。它现在是我的了，我可以用它做任何我想做的事情（别担心......我会在里面放五彩纸屑，我保证）。您不得尝试以任何方式使用画布（除了我猜想将其从 DOM 中删除），因为它会引发错误。当使用工作人员进行渲染时，必须将画布的控制权转移给网络工作人员，以防止在主线程上使用该画布。如果您必须以任何方式操作画布，请不要使用此选项。

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，该实例将具有自己的 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
  }
});

我说有创意……我们可以做得更好。因为无论我们调用多少次 confetti（只是空气中五彩纸屑的总数），我们可以做一些有趣的事情，比如在 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);
  }
}());