ちいつる

ジェネラティブ演出

打ち上げ花火

クリック/タップした座標へロケットが打ち上がり、放物運動で必ずその位置で開花する。重力+空気抵抗で減衰するパーティクルと加算合成の発光で花火らしさを出す。

ENGLISH

Canvas Fireworks

  • JS
  • Canvas
175ジェネラティブ演出 の一覧 →

プレビュー

クリック

操作クリック/タップで動きます。

実装メモ

軌跡は背景を低アルファで塗り重ねて消しています(globalCompositeOperationをsource-overに戻してから塗るのが必須。lighterのまま塗ると軌跡が消えず残り続けます)。実ページでは打ち上げ元(sx,sy)をボタン位置や画面下端に合わせて調整してください。

コード(コピーして使えます)

<div class="fw-wrap">
  <canvas class="fw-canvas" aria-hidden="true"></canvas>
  <p class="fw-hint">クリックした場所へ打ち上げます</p>
</div>

タグ

関連パーツ