Canvas Confetti

2025年1月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はこれまでの記事で何度か登場した、紙吹雪のJavaScriptライブラリ「Canvas Confetti」についてまとめます。

confettiは「紙吹雪」という意味ですね。

実装

参考：GitHub｜canvas-confetti

まずはCDNでjsを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

ボタンにonclick="confetti();"と入れるだけです。あら簡単！

<button onclick="confetti();">紙吹雪</button>

オプションいろいろ

いろいろオプションがあるようです。

confetti({
  angle: 90,
  spread: 45,
  startVelocity: 45,
  scalar: 1,
  gravity: 1,
  particleCount: 50,
  ticks: 200,
  origin: {
    x: 0.5,
    y: 0.5
  }
});

Fireworks

こちらのデモページに応用編が載っています。

まずは「Fireworks」を試してみましょう。

function fireworks() {
  var duration = 15 * 1000;
  var animationEnd = Date.now() + duration;
  var defaults = {
    startVelocity: 30,
    spread: 360,
    ticks: 60,
    zIndex: 0
  };
  function randomInRange(min, max) {
    return Math.random() * (max - min) + min;
  }
  fireworksInterval = setInterval(function() {
    var timeLeft = animationEnd - Date.now();
    if (timeLeft <= 0) {
      return clearInterval(fireworksInterval);
    }
    var particleCount = 50 * (timeLeft / duration);
    confetti({
      ...defaults,
      particleCount,
      origin: {
        x: randomInRange(0.1, 0.3),
        y: Math.random() - 0.2
      }
    });
    confetti({
      ...defaults,
      particleCount,
      origin: {
        x: randomInRange(0.7, 0.9),
        y: Math.random() - 0.2
      }
    });
  }, 250);
}
function stopFireworks() {
  if (fireworksInterval) {
    clearInterval(fireworksInterval);
    fireworksInterval = null;
  }
}

Stars

「Stars」もカッコイイです！スタアアァァズ……

function shoot() {
  const defaults = {
    spread: 360,
    ticks: 50,
    gravity: 0,
    decay: 0.94,
    startVelocity: 30,
    colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'],
    origin: {
      x: 0.5,
      y: 0.5
    },
  };
  for (let i = 0; i < 3; i++) {
    setTimeout(() => {
      confetti({
        ...defaults,
        particleCount: 40,
        scalar: 1.2,
        shapes: ['star']
      });
      confetti({
      ...defaults,
      particleCount: 10,
      scalar: 0.75,
      shapes: ['circle']
      });
    }, i * 100);
  }
}

まとめ

FireworksやStars以外もいつか試してみたいです！