3步构建高性能网页礼花：canvas-confetti全场景应用指南

canvas-confetti是一个轻量级浏览器端礼花动画库，通过Canvas API实现高性能粒子效果。它体积小巧（核心文件仅src/confetti.js）、配置灵活，支持自定义粒子行为与渲染优化，适用于庆典页面、游戏反馈、表单提交成功提示等场景，能为网页瞬间注入生动交互体验。

搭建基础渲染环境

现代网页动画需兼顾性能与兼容性，canvas-confetti提供三种灵活集成方案，可根据项目架构选择：

快速CDN引入

无需构建工具，一行代码即可启用：

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

适合静态页面或原型验证，加载后全局暴露confetti()方法。

npm模块化集成

现代前端项目推荐通过包管理器安装：

npm install canvas-confetti --save

支持ES模块导入：

import confetti from 'canvas-confetti';

源码本地部署

从仓库获取完整代码库进行定制开发：

git clone https://gitcode.com/gh_mirrors/ca/canvas-confetti

项目提供多场景示例页面（如fixtures/page.html），可直接运行查看效果。

定制粒子行为参数

粒子系统如同"数字烟花工厂"，通过精准参数控制实现千变万化的视觉效果。核心配置参数如下：

参数名	作用	取值建议
particleCount	粒子总数	移动端50-100，桌面端100-200
angle	发射角度	0-360（0=右，90=上，180=左）
spread	扩散角度	10-90（值越大分布越广）
startVelocity	初始速度	20-100（影响上升高度）
gravity	重力大小	0.5-2（值越大下落越快）
decay	速度衰减	0.85-0.95（值越小消失越快）

粒子生命周期管理：通过ticks参数控制粒子存在帧数（默认200），结合decay实现自然消失效果。

基础配置示例：

confetti({
  particleCount: 120,
  angle: 90,
  spread: 60,
  startVelocity: 50,
  gravity: 1.2,
  decay: 0.94,
  origin: { y: 0.8 } // 从屏幕80%高度处发射
});

实现视觉效果差异化

自定义粒子外观

内置圆形、方形两种基础形状，通过shapes参数指定：

confetti({
  shapes: ['circle', 'square'], // 混合形状
  colors: ['#ff6b6b', '#4ecdc4', '#ffe66d'], // 自定义配色
  scalar: 1.2 // 粒子大小缩放
});

路径形状支持：通过shapeFromPath()方法创建自定义矢量图形粒子：

const starShape = confetti.shapeFromPath('M10,0 L12,7 L20,7 L14,12 L16,20 L10,16 L4,20 L6,12 L0,7 L8,7 Z');
confetti({ shapes: [starShape] });

特殊效果实现

利用shapeFromText()将emoji或文本转化为粒子：

const heart = confetti.shapeFromText({ text: '❤️', scalar: 1.5 });
confetti({ 
  shapes: [heart],
  particleCount: 30,
  gravity: 0.6
});

跨框架集成方案

React集成

创建自定义Hook封装礼花逻辑：

import { useCallback } from 'react';
import confetti from 'canvas-confetti';

export function useConfetti() {
  return useCallback((options) => {
    confetti({
      particleCount: 80,
      spread: 60,
      ...options
    });
  }, []);
}

// 组件中使用
function SuccessButton() {
  const triggerConfetti = useConfetti();
  
  return (
    <button onClick={() => triggerConfetti({ origin: { y: 0.5 } })}>
      点击庆祝
    </button>
  );
}

Vue集成

注册全局指令实现元素点击效果：

// main.js
import confetti from 'canvas-confetti';
import Vue from 'vue';

Vue.directive('confetti', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      confetti(binding.value || { particleCount: 60 });
    });
  }
});

// 模板中使用
<template>
  <button v-confetti="{ angle: 120, spread: 40 }">发射礼花</button>
</template>

性能优化实践

渲染流程解析

graph TD
    A[配置参数解析] --> B[粒子系统初始化]
    B --> C[Web Worker并行计算]
    C --> D[OffscreenCanvas渲染]
    D --> E[requestAnimationFrame更新]
    E --> F{粒子生命周期结束?}
    F -->|是| G[清理Canvas资源]
    F -->|否| E

性能优化检查清单

• [ ] 控制粒子数量（移动端≤100，桌面端≤200）
• [ ] 启用Web Worker计算（默认开启）
• [ ] 为低性能设备降低scalar值（粒子大小）
• [ ] 对 prefers-reduced-motion 用户禁用动画
• [ ] 使用disableForReducedMotion: true遵循系统设置

扩展探索方向

1. 3D粒子效果：结合WebGL扩展实现立体空间礼花
2. 交互响应式动画：通过鼠标/触摸位置控制发射方向
3. 物理碰撞模拟：基于Verlet积分实现粒子间碰撞效果

该项目采用MIT许可，可免费用于商业项目。通过src/confetti.js源码学习Canvas粒子系统实现，或通过test/ssr.test.js了解服务端渲染兼容方案，进一步扩展动画能力边界。