用 html+css+js 做 canvas 烟花模拟网页动画代码

<!-- App --><div class="container">  <div class="loading-init">    <div class="loading-init__header">加载中...</div>    <div class="loading-init__status">正在准备烟花</div>  </div>  <div class="stage-container remove">    <div class="canvas-container">      <canvas id="trails-canvas"></canvas>      <canvas id="main-canvas"></canvas>    </div>    <div class="controls">      <div class="btn pause-btn">        <svg fill="white" width="24" height="24">          <use href="#icon-pause" xlink:href="#icon-pause"></use>        </svg>      </div>      <div class="btn sound-btn">        <svg fill="white" width="24" height="24">          <use href="#icon-sound-off" xlink:href="#icon-sound-off"></use>        </svg>      </div>      <div class="btn settings-btn">        <svg fill="white" width="24" height="24">          <use href="#icon-settings" xlink:href="#icon-settings"></use>        </svg>      </div>    </div>    <div class="menu hide">      <div class="menu__inner-wrap">        <div class="btn btn--bright close-menu-btn">          <svg fill="white" width="24" height="24">            <use href="#icon-close" xlink:href="#icon-close"></use>          </svg>        </div>        <div class="menu__header">设置</div>        <div class="menu__subheader">自定义属于你自己的烟花</div>        <form>          <div class="form-option form-option--select">            <label class="shell-type-label">爆炸类型</label>            <select class="shell-type"></select>          </div>          <div class="form-option form-option--select">            <label class="shell-size-label">爆炸大小</label>            <select class="shell-size"></select>          </div>          <div class="form-option form-option--select">            <label class="quality-ui-label">画面质量</label>            <select class="quality-ui"></select>          </div>          <div class="form-option form-option--select">            <label class="sky-lighting-label">天空亮度</label>            <select class="sky-lighting"></select>          </div>          <div class="form-option form-option--select">            <label class="scaleFactor-label">烟花大小</label>            <select class="scaleFactor"></select>          </div>          <div class="form-option form-option--checkbox">            <label class="auto-launch-label">自动烟花</label>            <input class="auto-launch" type="checkbox" />          </div>          <div class="form-option form-option--checkbox form-option--finale-mode">            <label class="finale-mode-label">自动结束</label>            <input class="finale-mode" type="checkbox" />          </div>          <div class="form-option form-option--checkbox">            <label class="hide-controls-label">隐藏控制台</label>            <input class="hide-controls" type="checkbox" />          </div>          <div class="form-option form-option--checkbox form-option--fullscreen">            <label class="fullscreen-label">全屏模式</label>            <input class="fullscreen" type="checkbox" />          </div>          <div class="form-option form-option--checkbox">            <label class="long-exposure-label">流光快门</label>            <input class="long-exposure" type="checkbox" />          </div>        </form>        <div class="credits">          <a href="http://www.hereitis.cn" target="_blank">在这里资源站</a>        </div>      </div>    </div>  </div>  <div class="help-modal">    <div class="help-modal__overlay"></div>    <div class="help-modal__dialog">      <div class="help-modal__header"></div>      <div class="help-modal__body"></div>      <button type="button" class="help-modal__close-btn">关闭</button>    </div>  </div></div><script src="./js/fscreen.js"></script><script src="./js/Stage.js"></script><script src="./js/MyMath.js"></script><script src="./js/index.js"></script><!-- <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/fscreen.js"></script><script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/Stage.js"></script><script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/MyMath.js"></script><script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/index.js"></script> -->