npm 包 dancing-shapes 使用教程

简介

dancing-shapes 是一个用于在网页中呈现彩色图形的 npm 包，由 Alexey Ivanov 开发。该包使用了 Dancing Squares' Polygons animation 效果，可以呈现出类似下图所示的效果：

本文将介绍如何使用 dancing-shapes 在自己的网页中呈现彩色图形。

安装

在使用 dancing-shapes 之前，我们需要先安装它。在终端中输入以下命令：

npm install dancing-shapes --save

使用

导入

安装完成后，我们需要将 dancing-shapes 导入我们的网页中。在 HTML 文件中引入 dancing-shapes.js：

<script src="[路径]/dancing-shapes.js"></script>

还可以在 JavaScript 文件中通过 import 导入：

import DancingShapes from 'dancing-shapes';

初始化

完成导入后，我们可以开始使用 dancing-shapes 了。首先需要创建一个位于某个 HTML 元素中的 canvas 元素，并设置其宽高。例如：

<canvas id="dancing-canvas" width="500" height="500"></canvas>

我们也可以在 JavaScript 中通过 querySelector 来获取这个 canvas 元素：

const canvas = document.querySelector('#dancing-canvas');

之后，我们可以通过以下代码初始化 dancing-shapes：

const dancingShapes = new DancingShapes(canvas);

配置

初始化完成后，我们可以对 dancing-shapes 进行一些配置。

-- -------------------- ---- -------
-------------------
  ------ ----------
  ------ ---
  ----------- -----
  ------- --
    ----- -----------------
    --------- --
    ------- --
  --
---

这里我们配置了 dancing-shapes 呈现的图形颜色为紫色，数量为 50，呈现的图形是 6 边形，半径为 40，同时启用了自动调整 canvas 大小的功能。

其他可配置的属性还有：

开始呈现

完成配置后，我们只需要调用 start 方法就可以让 dancing-shapes 在 canvas 元素中呈现了：

dancingShapes.start();

此时，我们可以看到呈现出了上文中展示的彩色图形。

停止呈现

如果我们想要停止 dancing-shapes 的呈现，可以调用 stop 方法：

dancingShapes.stop();

销毁实例

如果我们不再需要 dancing-shapes 实例，可以调用 destroy 方法来销毁它：

dancingShapes.destroy();

示例代码

下面是一个完整的 dancing-shapes 示例代码：

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------------------- ---------------
  -------
    ---- -
      ------- --
    -
  --------
-------
------
  ------- ------------------- ----------- ----------------------

  ------- -----------------------------------
  --------
    ----- ------ - ------------------------------------------
    ----- ------------- - --- ----------------------
  
    -------------------
      ------ ----------
      ------ ---
      ----------- -----
      ------- --
        ----- -----------------
        --------- --
        ------- --
      --
    ---
  
    ----------------------
  ---------
-------
-------

总结

本文介绍了 npm 包 dancing-shapes 的安装、初始化、配置以及使用。dancing-shapes 可以用于在网页中呈现彩色图形，具有良好的可定制性和实用性。如果你有对彩色图形的需求，可以尝试使用这个 npm 包。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de263