JS Confetti核心API解析：掌握addConfetti与位置控制

JS Confetti核心API解析：掌握addConfetti与位置控制

【免费下载链接】js-confettiJS Confetti library that supports emojis 🦄 🎉 ⚡️项目地址: https://gitcode.com/gh_mirrors/js/js-confetti

JS Confetti是一款轻量级的JavaScript库，专为在网页中创建绚丽的彩纸和 emoji 特效而设计。它提供了简洁的API接口，让开发者能够轻松实现各种庆祝效果，无论是按钮点击反馈还是页面加载动画。本文将深入解析其核心API，帮助你快速掌握addConfetti方法和位置控制技巧。

快速上手：初始化JS Confetti

使用JS Confetti前，需先通过npm安装依赖并初始化实例：

npm install js-confetti

import JSConfetti from 'js-confetti' const jsConfetti = new JSConfetti()

初始化时可传入自定义canvas元素，默认会自动创建全屏canvas覆盖在页面顶层。

核心方法：addConfetti详解

addConfetti是JS Confetti最常用的方法，用于在页面上生成彩纸效果。通过配置参数，你可以定制彩纸的数量、颜色、大小等属性。

基础用法

最简单的调用方式：

await jsConfetti.addConfetti()

这将使用默认配置从屏幕两侧发射彩色纸屑，效果如下：

JS Confetti默认效果演示

自定义配置项

addConfetti接受IAddConfettiConfig类型的配置对象，主要参数包括：

示例：使用emoji作为彩纸

await jsConfetti.addConfetti({ emojis: ['🦄', '🎉', '⚡️'], emojiSize: 20, confettiNumber: 30 })

精准定位：confettiDispatchPosition控制

通过confettiDispatchPosition参数，你可以精确控制彩纸发射的位置，实现更灵活的视觉效果。

坐标系统

JS Confetti使用屏幕坐标系，原点(0,0)位于页面左上角，x轴向右递增，y轴向下递增。例如：

// 在屏幕中心发射彩纸 await jsConfetti.addConfetti({ confettiDispatchPosition: { x: window.innerWidth / 2, y: window.innerHeight / 2 } })

响应式位置控制

结合鼠标事件，可以实现跟随鼠标点击位置发射彩纸的交互效果：

document.addEventListener('click', async (event) => { await jsConfetti.addConfetti({ confettiDispatchPosition: { x: event.clientX, y: event.clientY }, confettiNumber: 30 }) })

高级API：addConfettiAtPosition

除了addConfetti，库中还提供了addConfettiAtPosition方法，专门用于位置控制场景。该方法与addConfetti参数完全一致，但会忽略配置中的confettiDispatchPosition，强制使用方法调用时传入的坐标。

// 类型定义 src/types.ts interface IAddConfettiConfig { confettiRadius?: number, confettiNumber?: number, confettiColors?: string[], emojis?: string[], emojiSize?: number, confettiDispatchPosition?: IPosition | null, // 已废弃参数 emojies?: string[], confettiesNumber?: number, }

性能优化建议

1. 控制数量：单次发射的彩纸数量建议控制在100以内，过多会影响页面性能
2. 合理尺寸：根据屏幕大小调整纸屑半径，移动设备建议使用较小尺寸
3. 避免连续调用：快速连续调用会导致动画堆积，建议使用await确保前一次动画完成

常见问题解决

彩纸不显示？

检查canvas是否被其他元素遮挡，默认z-index为1000。可通过初始化配置自定义canvas样式：

const jsConfetti = new JSConfetti({ canvas: document.getElementById('custom-canvas') })

颜色不生效？

当配置了emojis参数时，confettiColors会被自动忽略，这是正常现象。

总结

JS Confetti通过简洁的API为网页增添生动的庆祝效果，addConfetti方法配合位置控制参数可以实现丰富的交互体验。无论是简单的按钮反馈还是复杂的动画效果，这款轻量级库都能满足你的需求。开始尝试在你的项目中集成JS Confetti，为用户带来愉悦的视觉体验吧！

【免费下载链接】js-confettiJS Confetti library that supports emojis 🦄 🎉 ⚡️项目地址: https://gitcode.com/gh_mirrors/js/js-confetti