🎉 在 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 源碼

如果還有類似的炫酷插件歡迎分享