Canvas Confetti 五彩纸屑特效 JS 插件

介绍

canvas-confetti 是一个使用 canvas 的五彩纸屑特效 JS 插件。先看下效果：

使用方式

1.NPM 安装：

npm install --save canvas-confetti 

然后通过 const confetti = require('canvas-confetti'); 在项目中使用。

2.从 CDN 导入 HTML 页面中（也可以将 JS 文件下载到本地，体积只有 10 KB 左右大小）：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js" defer></script> 

然后直接在 HTML 页面中调用 confetti() 方法即可立即展示特效。

控制发射原点

• origin.x：Number（默认值：0.5）：发射的水平方向原点，0 表示左边缘，1 表示右边缘。
• origin.y：Number (默认值: 0.5) :发射的垂直方向原点，0 表示上边缘，1 表示下边缘。

app.onclick = e => confetti({origin: {x: e.clientX / innerWidth,y: e.clientY / innerHeight}
}); 

这里的 e.cli