tsParticles无框架环境下粒子不渲染问题求助

核心原因：缺少渲染器依赖 #

tsParticles v3.x版本将核心引擎与渲染器分离，你只安装了@tsparticles/engine但未添加Canvas渲染器，导致粒子无法被渲染到页面上。

修复步骤 #

1. 安装Canvas渲染器 #

执行以下命令安装对应版本的渲染器：

npm install @tsparticles/renderer-canvas@3.4.0

2. 在代码中加载渲染器 #

修改你的main.js，添加渲染器加载逻辑（需在插件加载前执行）：

import { tsParticles } from "@tsparticles/engine";
import { loadPolygonMaskPlugin } from "@tsparticles/plugin-polygon-mask";
import { loadCanvasRenderer } from "@tsparticles/renderer-canvas"; // 新增导入
import { default as configs } from "@tsparticles/configs";

const log = console.log.bind(console);

log(configs.basic);

// 先加载Canvas渲染器
loadCanvasRenderer(tsParticles);
// 再加载Polygon Mask插件
loadPolygonMaskPlugin(tsParticles);

tsParticles
  .load({ id: "tsparticles", options: configs.multiplePolygonMasks })
  .then((container) => {
    log("callback - tsparticles config loaded");
  })
  .catch((error) => {
    console.error(error);
  });

3. 适配容器尺寸（可选） #

multiplePolygonMasks默认配置中的SVG路径尺寸可能远大于你设置的250x150容器，导致粒子渲染在容器可视区域外。可通过覆盖配置中的缩放参数调整：

tsParticles.load({
  id: "tsparticles",
  options: {
    ...configs.multiplePolygonMasks,
    polygonMask: {
      ...configs.multiplePolygonMasks.polygonMask,
      scale: 0.2 // 根据容器大小调整，缩小路径适配容器
    }
  }
})

验证 #

重新启动项目后，粒子应该会在#tsparticles容器内正常显示。如果仍有问题，可打开浏览器开发者工具，检查粒子容器的DOM元素是否正确生成，以及SVG路径的位置是否在容器范围内。

内容的提问来源于stack exchange，提问作者TK421