在 Vue 3 中使用 canvas-confetti 插件

🎉 在 Vue 3 中使用 canvas-confetti 插件

canvas-confetti 是一个轻量、无依赖的 JavaScript 动画库，用于在网页上展示彩带、庆祝动画。非常适合用于抽奖、支付成功、活动庆祝等场景。

本教程将指导你如何在 Vue 3 项目中集成并使用该插件。

---

📦 安装

使用 npm 或 pnpm 安装：

npm install canvas-confetti
# 或者
pnpm add canvas-confetti

---

🛠️ 在 Vue 3 中基本使用

1. 创建一个可重用组件（ConfettiCanvas.vue）

<template><canvas ref="canvas" class="confetti-canvas"></canvas>
</template><script setup>
import { onMounted, ref } from 'vue'
import confetti from 'canvas-confetti'const canvas = ref(null)
let myConfetti = nullonMounted(() => {if (canvas.value) {// 创建 confetti 实例，绑定 canvasmyConfetti = confetti.create(canvas.value, {resize: true,useWorker: true})}
})// 暴露一个函数用于触发
defineExpose({fire: () => {myConfetti &&myConfetti({particleCount: 100,spread: 70,origin: { y: 0.6 }})}
})
</script><style scoped>
.confetti-canvas {position: fixed;top: 0;left: 0;pointer-events: none;width: 100vw;height: 100vh;z-index: 9999;
}
</style>

---

2. 在父组件中使用

<template><button @click="launchConfetti">庆祝一下！</button><ConfettiCanvas ref="confettiRef" />
</template><script setup>
import { ref } from 'vue'
import ConfettiCanvas from './components/ConfettiCanvas.vue'const confettiRef = ref(null)function launchConfetti() {confettiRef.value?.fire()
}
</script>

---

💡 进阶用法

// 自定义彩带颜色、角度、速度
myConfetti({angle: 90,spread: 360,startVelocity: 45,particleCount: 150,origin: { x: 0.5, y: 0.5 },colors: ['#bb0000', '#ffffff', '#00bb00']
})

---

🪝 options参数说明

该参数是一个可选对象，它具有以下属性：confetti options

• particleCount Integer （默认值： 50）：要启动的五彩纸屑的数量。越多越有趣…但要酷一点，这涉及到很多数学。
• angle Number （default ： 90）：发射五彩纸屑的角度，以度为单位。90 是笔直向上的。
• spread Number （default： 45）：五彩纸屑可以偏离中心多远，以度为单位。45 表示五彩纸屑将在定义的正负 22.5 度处发射。angle
• startVelocity 数字 （默认值：45）：五彩纸屑开始移动的速度，以像素为单位。
• decay Number （default： 0.9）：五彩纸屑失去速度的速度。将此数字保持在 0 到 1 之间，否则五彩纸屑会加速。更好的是，永远不要改变它。
• gravity Number （default： 1）：粒子下拉的速度。1 是全重力，0.5 是半重力，依此类推，但没有限制。如果您愿意，您甚至可以使粒子上升。
• drift Number （default： 0）：五彩纸屑将漂移到一侧的程度。默认值为 0，这意味着它们将直接下降。对 left 使用负数，对 right 使用正数。
• flat 布尔值 （默认值： false）：（可选）关闭三维五彩纸屑在现实世界中会具有的倾斜和摆动。是的，他们看起来有点难过，但你们都要求他们，所以不要怪我。
• ticks Number （default： 200）：五彩纸屑移动的次数。这是抽象的…但是，如果五彩纸屑对您来说消失得太快，请玩弄它。
• origin Object：从何处开始发射五彩纸屑。如果您愿意，请随时在屏幕外启动。
• origin.x 数字 （默认值：0.5）：页面上的位置，分别是左边缘和右边缘。x01
• origin.y 数字 （默认值：0.5）：页面上的位置，上边缘和下边缘。y01
• colors Array：颜色字符串数组，十六进制格式…你知道的，比如 .#bada55
• shapes 数组<字符串|Shape>：五彩纸屑的形状数组。有 、 和 的 3 个内置值。默认设置是在均匀混合中同时使用正方形和圆形。要使用单个形状，您可以在数组中只提供一个形状，例如 .您还可以通过提供一个值来更改组合，例如使用两个第三个圆和一个第三个正方形。您还可以使用 confetti.- - shapeFromPath 或 confetti.shapeFromText 帮助程序方法创建自己的形状。squarecirclestar[‘star’][‘circle’, ‘circle’, ‘square’]
• scalar Number （default ： 1）：每个五彩纸屑粒子的缩放因子。使用小数点使五彩纸屑更小。继续，试试微小的五彩纸屑，它们很可爱！
• zIndex Integer （default： 100）：毕竟，五彩纸屑应该在上面。但是如果你有一个疯狂的高页，你可以把它设置得更高。
• disableForReducedMotion 布尔值 （默认值： false）：为喜欢减少运动的用户完全禁用五彩纸屑。在这种情况下，承诺将立即解决。confetti()

我之前开发中有一组好用的参数配置，大家可以参考下

// 多个角度方向触发爆炸
const angles = [60, 120, 180, 240, 300, 360];
angles.forEach((angle) => {canvasRefs.value.confetti({particleCount: 30,spread:40,               // 爆炸范围大startVelocity: 18,         // 爆炸速度快angle,                     // 多角度发射origin: { x: 0.5, y: 0.4 }, // 居中爆炸scalar: 1.2,decay: 0.9});
});

---

❓ 问题清单

1.部分手机上会出现无法加载问题，比如小米手机上自带的浏览器无法显示？
需要将useWorker设置为false，

✅ 总结

• canvas-confetti 适合快速接入各种庆祝场景
• 在 Vue 3 中封装成组件便于重复使用
• 配合 ref 和 defineExpose 可从外部调用动画触发函数

---

📚 参考资料

• canvas-confetti 官方文档
• GitHub 源码

如果还有类似的炫酷插件欢迎分享