SparkFireworks

一个轻量的网页烟花模拟器和烟花效果库，支持可视化调参、内置预设、CDN 直接引入、npm 安装以及高级脚本自定义粒子。

在线与源码

• npm: https://www.npmjs.com/package/@mar7th/firework
• Gitee: https://gitee.com/march7th-online/firework-yoimiya

安装

npm install @mar7th/firework

使用

ESM

<canvas id="fireworks" style="width:100vw;height:100vh;display:block"></canvas>

<script type="module">
  import SparkFireworks from "@mar7th/firework";

  const fireworks = SparkFireworks.create("fireworks", {
    particleCount: 220,
    colorStart: "#ffd166",
    colorEnd: "#ef476f",
    enableTrails: true
  });

  fireworks.launchRandom();
</script>

CDN

unpkg:

<script type="module">
  import SparkFireworks from "https://unpkg.com/@mar7th/[email protected]/dist-lib/spark-fireworks.js";

  const fireworks = SparkFireworks.create("fireworks", {
    autoLaunch: true
  });
</script>

jsDelivr:

<script type="module">
  import SparkFireworks from "https://cdn.jsdelivr.net/npm/@mar7th/[email protected]/dist-lib/spark-fireworks.js";

  const fireworks = SparkFireworks.create("fireworks", {
    autoLaunch: true
  });
</script>

UMD:

<canvas id="fireworks" style="width:100vw;height:100vh;display:block"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@mar7th/[email protected]/dist-lib/spark-fireworks.umd.cjs"></script>
<script>
  const fireworks = SparkFireworks.create("fireworks", {
    autoLaunch: true,
    autoLaunchIntervalSeconds: 1
  });
</script>

常用 API

const fireworks = SparkFireworks.create(canvasOrId, configOrOptions);

fireworks.launch(x, y);
fireworks.launchRandom();
fireworks.startAutoPlay(seconds);
fireworks.stopAutoPlay();
fireworks.setConfig({ particleCount: 300 });
fireworks.destroy();

create 的第一个参数可以是 canvas 元素，也可以是 canvas 的 id。第二个参数可以直接传配置，也可以传完整 options：

SparkFireworks.create("fireworks", {
  config: {
    explosionShape: "heart",
    particleCount: 300
  },
  onFpsChange(fps) {
    console.log("FPS", fps);
  }
});

更完整的 API 说明见 docs/api-guide.md。

高级脚本

高级模式允许你通过 createParticles(canvasData) 完全控制粒子的生成方式。高级模式下所有参数均以脚本设置为准，页面设置可能被覆盖不生效。

SparkFireworks.create("fireworks", {
  advancedMode: true,
  createParticles(canvasData) {
    return {
      config: {
        gravity: 0.08,
        enableTrails: true
      },
      particles: [
        {
          x: canvasData.x,
          y: canvasData.y,
          vx: 2,
          vy: -3,
          size: 4,
          life: 90,
          startColor: "#ffd166",
          endColor: "#ef476f"
        }
      ]
    };
  }
});

本地开发

npm install
npm run dev

构建页面和库文件：

npm run build

只构建库文件：

npm run build:lib

构建产物：

dist-lib/spark-fireworks.js
dist-lib/spark-fireworks.umd.cjs

License

MIT License. See LICENSE.