结婚时，✴️❇️✴️五彩纸屑枪效果

confetti（婚礼、狂欢节中抛撒的）五彩纸屑；（旧时狂欢节或庆祝场合抛撒的）糖果

我们偶尔会看到一些网站一打开页面就会出现这种效果:

当然这个是一直在放，有的是由多到少地放。

这个用的仓库是github.com/catdad/canv…

var myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas, {
    resize: true,
    useWorker: true
});
myConfetti({
    particleCount: 100,
    spread: 160
    // any other options from the global
    // confetti function
});

有的是由多到少，再到没。效果如下：

代码:

(function() {
const e = Date.now() + 3e3, // 当前时间加3s
  t = {
    startVelocity: 30, // 开始速度
    spread: 360,  // 数值(默认值:45):纸屑偏离中心的程度。
    ticks: 60, // 数量(默认值:200):纸屑移动的次数。
    zIndex: 0, // 整数(默认值:100):纸屑应该在最上面。
  };

function l(e, t) {
  return Math.random() * (t - e) + e;
}

const a = setInterval(function() {
  const o = e - Date.now();
  if (o <= 0) return clearInterval(a);
  const s = (o / 3e3) * 50;

  confetti(
    Object.assign({}, t, {
      particleCount: 50, // Integer (默认值: 50) : 要启动的五彩纸屑数量。
      origin: {
        x: l(0.1, 0.3),
        y: Math.random() - 0.2,
      }, // origin 对象: 从哪里开始发射五彩纸屑。
    })
  ),
  confetti(
    Object.assign({}, t, {
      particleCount: 50,
      origin: {
        x: l(0.7, 0.9),
        y: Math.random() - 0.2,
      },
    })
  );
}, 300);
})();

当然也可以通过npm包去下载模块

npm install --save canvas-confetti

const MyPromise = require('some-promise-lib');
const confetti = require('canvas-confetti');
confetti.Promise = MyPromise;

代码链接