npm 包 dust-particles 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 dust-particles

dust-particles 是一款用于在网页上生成粒子效果的 npm 包。它使用了 HTML5 的 canvas 元素，能够在页面中模拟出火花、烟雾等各种粒子效果。

安装 dust-particles

使用 npm 进行安装：

npm install dust-particles --save

使用 dust-particles

在项目中引入 dust-particles 包，并在页面上添加一个 canvas 元素。使用以下代码创建一个粒子效果：

import Particle from "dust-particles";

const canvas = document.querySelector("canvas");
const particle = new Particle(canvas);

particle.start();

Particle 类是 dust-particles 包的主要类，通过创建一个新的 Particle 对象，并将其传入我们的 canvas 元素，我们就可以使用 start 方法启动粒子效果。

参数配置

dust-particles 提供了一些可用的参数，可以通过传递一个配置选项对象来进行修改。以下是几个常用的参数：

particleSize：粒子的大小，默认为 3
particleColor：粒子的颜色，默认为 "rgba(255, 255, 255, .5)"
particleShape：粒子的形状，可以是 "circle" 或 "rectangle"，默认为 "circle"
particleSpeed：粒子的速度，默认为 1
particleNumber：粒子的数量，默认为 300
particleDensity：粒子的密度，默认为 1000

以下是一个带有参数配置的 Particle 对象:

const particle = new Particle(canvas, {
  particleSize: 2,
  particleColor: "rgba(255, 0, 0, .5)",
  particleShape: "rectangle",
  particleSpeed: 1.5,
  particleNumber: 200,
  particleDensity: 800
});

particle.start();

结束粒子效果

使用以下代码可以停止粒子效果：

particle.stop();

在需要停止粒子效果时，调用以上代码即可停止效果。

示例代码

以下是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dust-particles 示例</title>
</head>
<body>
  <canvas></canvas>
  <script src="https://unpkg.com/dust-particles/dist/index.js"></script>
  <script>
    const canvas = document.querySelector("canvas");
    const particle = new Particle(canvas);

    particle.start();
  </script>
</body>
</html>

以上代码可以在任意包含 canvas 元素的现有项目中使用，也可以复制到新的 HTML 文件中运行以查看效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53d87