Canvas Confetti 五彩纸屑特效 JS 插件

介绍

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

使用方式

1. NPM 安装：

npm install --save canvas-confetti

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

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

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/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.clientX / innerWidth 表示鼠标事件的 X 坐标除以窗口的内部宽度，e.clientY / innerHeight 表示鼠标事件的 Y 坐标除以窗口的内部高度。

控制数量和扩散角度

• particleCount：Number（默认值：50），要发射的五彩纸屑的数量。
• spread：Number（默认值：45），五彩纸屑在垂直方向扩散的角度，45 表示五彩纸屑以垂直方向正负 22.5 度角发射。

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

控制发射角度

• angle：Number（默认值：90）：发射的角度，0 表示水平向右；90 表示垂直向上；180 表示水平向左；270 表示垂直向下。

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}
app.onclick = e => confetti({
  particleCount: 200,
  spread: 180,
  angle: randomInRange(0, 360),
  origin: {
    x: e.clientX / innerWidth,
    y: e.clientY / innerHeight
  }
});

控制重力和消失的速度

• gravity：Number（默认值：1），粒子下落的速度。1 是全重力，0.5 是半重力，0 表示无重力；大于 1 表示加速下落，负值表示粒子会向上升起。
• ticks：Number (默认值: 200) ，值越小粒子消失得越快，值越大粒子消失得越慢。
• startVelocity：Number（默认值：45），五彩纸屑开始移动的速度，以像素为单位。

app.onclick = e => confetti({
  particleCount: 400,
  spread: 180,
  shapes: ['circle', 'circle', 'square'],
  gravity: 0,
  startVelocity: 30,
  ticks: 1000,
  origin: {
    x: e.clientX / innerWidth,
    y: e.clientY / innerHeight
  }
});

控制颜色和形状

• colors Array：颜色字符串数组，采用 HEX 格式（# + 3 位或 6 位十六进制数字），可以重复颜色来增加比例，例如 ['#f00', '#f00', '#f00', '#f00', '#0f0', '#00f', '#ff0'] 表示红色占七分之四，绿色、蓝色、黄色各占七分之一比例。
• shapes Array：五彩纸屑的形状数组，可以为 square 和 circle。默认设置是均匀混合使用这两种形状。['circle', 'circle', 'square'] 表示使用三分之二的圆圈和三分之一的正方形。

烟花特效

雪花特效

庆祝特效

感谢您的阅读！