Triangle-Split 是一个开源的 npm 包，使用 Canvas 绘制并分割一个三角形。本文将对这个包进行介绍，并带领读者使用该包来制作一个动态的三角形分割效果。
使用方法
首先，在项目中安装该 npm 包：
npm install triangle-split
接着，在项目代码中引入 Triangle-Split：
import TriangleSplit from 'triangle-split';
可以通过以下代码创建 Triangle-Split 实例：
const canvas = document.getElementById('canvas');
const triangleSplit = new TriangleSplit(canvas);其中，参数 canvas 代表一个已经存在的 Canvas 元素。Triangle-Split 将在该元素上进行绘制。
接下来，我们可以使用 Triangle-Split 提供的一些方法来配置我们的三角形分割效果。例如：
triangleSplit.setPoints(200, 100, 100, 300, 300, 300); // 设置三角形三个顶点的坐标
triangleSplit.setColor('#faa'); // 设置三角形颜色
triangleSplit.setLineWidth(2); // 设置绘制线条的宽度最后，我们可以通过调用 Triangle-Split 的 split 方法来进行三角形分割。该方法接受一个可选参数 interval，表示每一次对三角形进行分割的时间间隔（单位为毫秒）：
triangleSplit.split(1000); // 每1秒对三角形进行一次分割
特别说明
在使用 Triangle-Split 进行三角形分割之前，需要确保 canvas 的大小已经被设置。可以通过以下代码设置它的大小：
<canvas id="canvas" width="600" height="600"></canvas>
制作动态三角形分割效果
下面，我们来实现一个动态的三角形分割效果。最终效果如下：
HTML
首先，在 HTML 中添加一个 Canvas 元素：
<canvas id="canvas" width="600" height="600"></canvas>
CSS
接着，我们需要对 Canvas 元素的样式进行一些调整，保证它居中。
#canvas {
display: block;
margin: 0 auto;
border: 1px solid #ccc;
}JavaScript
接下来，我们开始编写 JavaScript 代码。
首先，引入 Triangle-Split 包，并创建一个 Triangle-Split 实例：
import TriangleSplit from 'triangle-split';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const triangleSplit = new TriangleSplit(canvas);
triangleSplit.setLineWidth(2);
triangleSplit.setColor('#5588dd');接着，我们需要编写一个函数 draw，用于在 Canvas 上进行绘制。该函数使用 requestAnimationFrame 方法来实现动画效果：
-- -------------------- ---- -------
--- - - --
--- --------- - --
-------- ------ -
---------------- -- ------------- ---------------
-- ------
-- -- -- - -- - -- -- -
--------- - -----------
-
- -- ----------
-- -----------
----- ---- --- --- --- --- --- - ----- ---- --- - - - --- --- - - - --- --- - - - --- --- - - - ----
--------------------------- --- --- --- --- ----
-- --------
-------------------------
----------------------------
-
-------最后，我们将代码完整地放在一起：
-- -------------------- ---- -------
------ ------------- ---- -----------------
----- ------ - ----------------------------------
----- --- - ------------------------
----- ------------- - --- ----------------------
------------------------------
----------------------------------
--- - - --
--- --------- - --
-------- ------ -
---------------- -- ------------- ---------------
-- ------
-- -- -- - -- - -- -- -
--------- - -----------
-
- -- ----------
-- -----------
----- ---- --- --- --- --- --- - ----- ---- --- - - - --- --- - - - --- --- - - - --- --- - - - ----
--------------------------- --- --- --- --- ----
-- --------
-------------------------
----------------------------
-
-------打开浏览器，即可看到动态的三角形分割效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fb281e8991b448dd00a