catdad

canvas-confetti 是一个轻量级浏览器端库，通过 Canvas 实现高性能五彩纸屑动画，开发者可调用 confetti() 函数在页面任意位置触发粒子效果，支持自定义粒子数量、角度、扩散范围、颜色、形状及重力等参数。

核心参数与自定义能力

confetti() 接受一个可选对象，提供十余项参数精细控制动画行为。粒子数量（particleCount）默认为50，角度（angle）默认90度（垂直向上），扩散范围（spread）默认45度，起始速度（startVelocity）默认45像素，衰减系数（decay）默认0.9，重力（gravity）默认1，水平漂移（drift）默认0，平面模式（flat）关闭3D倾斜效果，大型运动步数（ticks）默认200，缩放因子（scalar）默认1，z-index默认100。

• origin: 通过 origin.x（0-1）和 origin.y（0-1）设置发射起点位置，支持屏幕外发射
• colors: 传入十六进制颜色数组自定义纸屑颜色
• shapes: 内置 square、circle、star 三种形状，可混合比例或通过 shapeFromPath/shapeFromText 创建自定义形状
• disableForReducedMotion: 设为 true 可尊重用户系统减少动效偏好，此时 confetti() 立即 resolve

安装与使用方式

支持 npm 安装和 CDN 引入两种方式。npm 安装后需通过构建工具（如 webpack）打包，CDN 版本暴露为全局 confetti 函数。

• npm 安装: npm install --save canvas-confetti，然后 require('canvas-confetti')
• CDN 引入: 使用 jsdelivr 链接 https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js
• Promise 兼容: 默认返回 Promise，IE 等无 Promise 环境返回 null，可注入自定义 Promise 实现

无障碍与负责任使用

项目特别强调尊重用户减少动效的偏好，提供 disableForReducedMotion 选项，默认关闭但作者考虑未来默认开启。

• 减少动效检测: 通过 disableForReducedMotion 配合系统 prefers-reduced-motion 媒体查询
• 作者态度: 文档中明确呼吁「please confetti responsibly」，鼓励开发者谨慎使用动画

社区与维护

GitHub 仓库 catdad/canvas-confetti 拥有 12.7k Star、466 Fork，持续维护中。

• 许可证: ISC 开源许可
• 版本: 当前稳定版 1.9.4（CDN 引用版本）
• Demo: 在线演示地址 catdad.github.io/canvas-confetti

常见问题

Q1：canvas-confetti 能在 Node.js 服务端运行吗？

A1：不能。文档明确标注这是一个客户端组件，不会在 Node 中运行，需要通过 webpack 等工具打包到前端项目中使用。

Q2：如何让纸屑只使用星形一种形状？

A2：在 options 中设置 shapes: ['star']。默认是 square 和 circle 各半，也可通过数组比例自定义混合，如 ['circle', 'circle', 'square'] 表示三分之二的圆形加三分之一的方形。

Q3：多次调用 confetti() 会创建多个 Canvas 吗？

A3：不会。内部会复用同一个 Canvas 元素，新纸屑会追加到已有动画中，Promise 在所有动画完成后才 resolve。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。