简介
dancing-shapes 是一个用于在网页中呈现彩色图形的 npm 包，由 Alexey Ivanov 开发。该包使用了 Dancing Squares' Polygons animation 效果，可以呈现出类似下图所示的效果：
本文将介绍如何使用 dancing-shapes 在自己的网页中呈现彩色图形。
安装
在使用 dancing-shapes 之前，我们需要先安装它。在终端中输入以下命令：
--- ------- -------------- ------
使用
导入
安装完成后，我们需要将 dancing-shapes 导入我们的网页中。在 HTML 文件中引入 dancing-shapes.js：
------- --------------------------------------
还可以在 JavaScript 文件中通过 import 导入：
------ ------------- ---- -----------------
初始化
完成导入后，我们可以开始使用 dancing-shapes 了。首先需要创建一个位于某个 HTML 元素中的 canvas 元素，并设置其宽高。例如：
------- ------------------- ----------- ----------------------
我们也可以在 JavaScript 中通过 querySelector 来获取这个 canvas 元素：
----- ------ - ------------------------------------------
之后，我们可以通过以下代码初始化 dancing-shapes：
----- ------------- - --- ----------------------
配置
初始化完成后，我们可以对 dancing-shapes 进行一些配置。
-------------------
------ ----------
------ ---
----------- -----
------- --
----- -----------------
--------- --
------- --
--
---这里我们配置了 dancing-shapes 呈现的图形颜色为紫色，数量为 50，呈现的图形是 6 边形，半径为 40，同时启用了自动调整 canvas 大小的功能。
其他可配置的属性还有：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
color |
string | '#ff2bff' |
图形的颜色 |
count |
number | 30 |
dancing-shapes 呈现的图形数量 |
size |
number | 80 |
图形的大小 |
speed |
number | 0.5 |
dancing-shapes 的速度 |
shapes |
Array | [{ type: 'square' }] |
呈现的图形种类和参数 |
autoresize |
boolean | true |
是否根据父元素自动调整 canvas 大小 |
开始呈现
完成配置后，我们只需要调用 start 方法就可以让 dancing-shapes 在 canvas 元素中呈现了：
----------------------
此时，我们可以看到呈现出了上文中展示的彩色图形。
停止呈现
如果我们想要停止 dancing-shapes 的呈现，可以调用 stop 方法：
---------------------
销毁实例
如果我们不再需要 dancing-shapes 实例，可以调用 destroy 方法来销毁它：
------------------------
示例代码
下面是一个完整的 dancing-shapes 示例代码：
--------- -----
----- ----------
------
----- ----------------
--------------------- ---------------
-------
---- -
------- --
-
--------
-------
------
------- ------------------- ----------- ----------------------
------- -----------------------------------
--------
----- ------ - ------------------------------------------
----- ------------- - --- ----------------------
-------------------
------ ----------
------ ---
----------- -----
------- --
----- -----------------
--------- --
------- --
--
---
----------------------
---------
-------
-------总结
本文介绍了 npm 包 dancing-shapes 的安装、初始化、配置以及使用。dancing-shapes 可以用于在网页中呈现彩色图形，具有良好的可定制性和实用性。如果你有对彩色图形的需求，可以尝试使用这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601581e8991b448de263