【亲测免费】 🎉 HTML5画布上的高性能五彩纸屑动画 - canvas-confetti 使用指南

2026-01-17 09:36:59作者：侯霆垣

项目介绍

canvas-confetti 是一个高效的浏览器端五彩纸屑动画库，由 Catdad 开发并维护。这个项目基于 HTML5 的 <canvas> 元素，提供了丰富的配置选项，使得在网页上创建动态且视觉吸引人的五彩纸屑效果变得轻而易举。它支持自定义粒子数量、发射角度、散射范围以及更高级的特性，如工作线程的支持，以保持页面性能的流畅。此外，canvas-confetti 还引入了形状和文本作为五彩纸屑的能力，增加了创意表达的维度。

项目快速启动

要快速开始使用 canvas-confetti，首先你需要在你的项目中引入这个库。这可以通过 CDN 链接或者直接从 GitHub 下载后引入。以下是通过 CDN 引入并在网页上立即启用五彩纸屑动画的基本步骤：

步骤一：添加 `<canvas>` 标签

在 HTML 文件中添加一个 <canvas> 标签，用于五彩纸屑动画的渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Confetti Animation</title>
</head>
<body>
    <canvas id="confetti-canvas"></canvas>
    <!-- 引入 canvas-confetti -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.min.js"></script>
    <script src="yourScript.js"></script> <!-- 假设你的JavaScript代码放在这里 -->
</body>
</html>

步骤二：编写 JavaScript 初始化代码

在 yourScript.js 中初始化五彩纸屑动画。

document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById('confetti-canvas');
    const confettiInstance = confetti.create(canvas, { resize: true, useWorker: true });

    // 启动五彩纸屑动画
    confettiInstance({
        particleCount: 100,
        spread: 160
    });
});

应用案例和最佳实践

动态事件触发五彩纸屑

利用事件（比如按钮点击或页面加载完成）来控制五彩纸屑的启动和结束，是一个常见的实践。下面展示如何在庆祝特定事件时启动动画，并在一段时间后自动清除。

document.querySelector('#startButton').addEventListener('click', function() {
    confettiInstance();
    
    setTimeout(function() {
        confettiInstance.reset(); // 清除五彩纸屑并停止动画
    }, 3000); // 例如，在3秒后停止
});

自定义形状和表情符号五彩纸屑

canvas-confetti 支持创建定制形状，甚至可以使用表情符号作为五彩纸屑，给用户带来惊喜元素。

// 创建三角形五彩纸屑
var triangleShape = confetti.shapeFromPath(['M0 10 L5 0 L10 10z']);
confettiInstance({ shapes: [triangleShape] });

// 或者使用表情符号
const pineappleShape = confetti.shapeFromText([{ text: '🍍', scalar: 2 }]);
confettiInstance({ shapes: [pineappleShape] });

典型生态项目

虽然 canvas-confetti 主要是作为一个独立的组件存在，但其广泛应用在多种场景下，如网站庆典、游戏胜利界面、特殊节日问候等。开发者们常将它集成到他们的Web应用程序中，提升用户体验。社区内虽没有明确列出“典型生态项目”，但它被广泛地应用于个人博客、活动宣传页、在线贺卡工具等创意项目中，体现了其灵活性和普适性。

通过上述指导，你可以轻松地将五彩纸屑动画添加到自己的网站或应用中，增加互动性和趣味性。canvas-confetti 简洁的API设计和丰富的配置选项使得定制化成为可能，不论是小型个人项目还是大型商业应用，都能找到合适的应用方式。

canvas-confetti

🎉 performant confetti animation in the browser

项目地址：https://gitcode.com/gh_mirrors/ca/canvas-confetti

登录后查看全文