如何修改tsParticles.js v2中Canvas的位置与尺寸？

核心问题 #

你之前配置里的FullScreen是大驼峰写法，而tsParticles v2的配置选项采用小驼峰命名，导致全屏关闭设置未生效，Canvas依然强制全屏并添加!important内联样式。

修复步骤 #

• 修正配置项命名：将配置中的FullScreen改为小驼峰的fullScreen，确保关闭全屏模式。
• 强制继承容器尺寸：如果预设（preset）仍有默认配置干扰，可额外添加size选项锁定尺寸，或确保容器的宽高能被正确读取。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>tsParticles</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #212121;
        }

        #tsparticles {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div id="tsparticles"></div>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-bubbles@2/tsparticles.preset.bubbles.bundle.min.js"></script>
    <script>
        (async () => {
            await loadBubblesPreset(tsParticles);

            await tsParticles.load("tsparticles", {
                autoPlay: false,
                // 小驼峰写法，关闭全屏模式
                fullScreen: { 
                    enable: false,
                    zIndex: 99 
                },
                // 可选：强制Canvas尺寸与容器一致，避免预设干扰
                size: {
                    width: "100%",
                    height: "100%"
                },
                preset: "bubbles",
            });
        })();
    </script>
</body>

</html>

额外说明 #

• 关闭全屏后，tsParticles会自动读取父容器#tsparticles的宽高来设置Canvas尺寸，无需手动修改内联样式。
• 如果预设中包含强制全屏的配置，fullScreen.enable: false会覆盖预设的对应选项。
• 若仍有问题，需确保容器有明确的宽高值（不能是auto），tsParticles需要读取容器的计算尺寸来渲染Canvas。

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