Particles.js 在 .NET Core 中无法正常工作

Question

NET MVC 核心，我正在尝试使用 Particles.js。我已经尝试参考一些教程，但无法解决这个问题。这就是它通常的样子。 https://vincentgarreau.com/particles.js/#default

但是我得到了这个，按钮又大又超级滞后，而且它不占据全屏，也没有悬停动作（当鼠标靠近时圆圈会移开）。 onclick 圆虽然有效。而且配置应该不会错，因为我下载的是默认的

更新：就在发布之前，我设法让它全屏显示。然而，大按钮和滞后仍然存在。

以下是我到目前为止的代码。我试图搜索 id 或 class 但由于缺乏文档，很难找到。希望知道的人能帮帮忙！非常感谢:)

@{
    ViewData["Title"] = "Home Page";
}

<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(&quot;&quot;); background-size: cover; background-repeat: no-repeat; ba">
    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>


<script>
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 400,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: '#fff'
            },
            shape: {
                type: 'circle',
                stroke: {
                    width: 0,
                    color: '#ff0000'
                },
                polygon: {
                    nb_sides: 5
                },
                image: {
                    src: '',
                    width: 100,
                    height: 100
                }
            },
            opacity: {
                value: 1,
                random: false,
                anim: {
                    enable: false,
                    speed: 2,
                    opacity_min: 0,
                    sync: false
                }
            },
            size: {
                value: 20,
                random: false,
                anim: {
                    enable: false,
                    speed: 20,
                    size_min: 0,
                    sync: false
                }
            },
            line_linked: {
                enable: true,
                distance: 100,
                color: '#fff',
                opacity: 1,
                width: 1
            },
            move: {
                enable: true,
                speed: 2,
                direction: 'none',
                random: false,
                straight: false,
                out_mode: 'out',
                bounce: false,
                attract: {
                    enable: false,
                    rotateX: 3000,
                    rotateY: 3000
                }
            },
            array: []
        },
        interactivity: {
            detect_on: 'canvas',
            events: {
                onhover: {
                    enable: true,
                    mode: 'grab'
                },
                onclick: {
                    enable: true,
                    mode: 'push'
                },
                resize: true
            },
            modes: {
                grab: {
                    distance: 100,
                    line_linked: {
                        opacity: 1
                    }
                },
                bubble: {
                    distance: 200,
                    size: 80,
                    duration: 0.4
                },
                repulse: {
                    distance: 200,
                    duration: 0.4
                },
                push: {
                    particles_nb: 4
                },
                remove: {
                    particles_nb: 2
                }
            },
            mouse: {}
        },
        retina_detect: false,
    });
    //var count_particles, stats, update;
    //stats = new Stats;
    //stats.setMode(0);
    //stats.domElement.style.position = 'absolute';
    //stats.domElement.style.left = '0px';
    //stats.domElement.style.top = '0px';
    //document.body.appendChild(stats.domElement);
    //count_particles = document.querySelector('.js-count-particles');
    //update = function () {
    //    stats.begin();
    //    stats.end();
    //    if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    //        count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
    //    }
    //    requestAnimationFrame(update);
    //};
    //requestAnimationFrame(update);;
</script>

Answer 1

更新：我终于找到了答案。为了方便以后从事此工作的人，请确保使用侧边栏的下载，而不是中心的下载。

不是这个（中间下载）：

但是这个（右下角，"Download current config(json)"）：

Particles.js 在 .NET Core 中无法正常工作

Particles.js not working properly in .NET Core

javascript

particles.js

asp.net-core