一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

Canvas Confetti 是一个用于在网页上生成五彩纸屑特效的 JavaScript 库。这个库基于 canvas 技术，可以轻松创建逼真的礼花效果和五彩纸屑动画，适用于各种节日气氛或互动体验。

该库体积小巧，只有大约 10 KB 大小，非常适合快速加载和使用。通过简单的代码即可实现多种特效，包括撒花、放烟花和下雪等，并且支持自定义元素形状和大小。开发者可以通过 NPM 安装此插件，然后在项目中引入并使用它。

Canvas Confetti库的特点：

1、高性能：Canvas Confetti 能够确保即使在使用成百上千的例子时，也能保持较高的帧率，从而提供流畅的动画体验。

2、兼容性：该库兼容各种现代浏览器，使得开发者可以轻松地在不同平台和设备上实现炫酷的彩色纸屑动画效果。

3、易于使用：作为一个轻量级的库，Canvas Confetti 非常容易集成到现有的项目中，不需要复杂的配置即可快速上手。

4、视觉吸引力：通过提供视觉上吸引人的动画效果，Canvas Confetti 可以增强用户的体验，并且默认情况下符合可访问性标准，有助于推动包容性。

5、开源免费：作为一个免费开源的项目，Canvas Confetti 允许开发者自由地使用和修改代码，进一步降低了开发成本。

Canvas Confetti轻松上手：

方法一：直接引用

<script src="./confetti.browser.min.js"></script>

调用方法一：

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

方法二：直接安装

npm install --save canvas-confetti

调用方法二：

var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

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

var interval = setInterval(function() {
  var timeLeft = animationEnd - Date.now();

  if (timeLeft <= 0) {
    return clearInterval(interval);
  }

  var particleCount = 50 * (timeLeft / duration);
  // since particles fall down, start a bit higher than random
  confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
  confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
}, 250);

此外，Canvas Confetti 还支持自定义画布区域，允许开发者限制五彩纸屑出现的范围，从而更精确地控制视觉效果。对于需要高性能和流畅动画效果的场景，Canvas Confetti 提供了良好的解决方案。

进入Canvas Confetti库入口