在现代的前端开发中，使用 npm 包已经成为了不可或缺的技术手段。而 easel-gl 则是一个比较优秀的 npm 包，它提供的 API 简单易用，可以帮助我们快速地在画布上绘制 2D 或 3D 图形。
本篇文章将从使用 easel-gl 的基础知识开始，详细讲解其常见的用法，并提供示例代码供读者参考。
安装 easel-gl
使用 easel-gl 之前，我们需要先安装该 npm 包。由于 easel-gl 是基于 pixi.js 开发的，因此我们需要先安装 pixi.js。
在命令行中输入以下命令进行安装：
npm install pixi.js easel-gl
初始化 easel-gl
安装完成后，我们需要初始化 easel-gl。在 JavaScript 文件中引入 pixi.js 和 easel-gl，然后可以通过以下代码初始化 easel-gl：
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- ------ - ------- - ---- ----------- ----- -------- - --- --------------- ------ ---- ------- --- --- ----- ----- - --- ----------------- ----- ----- - --- --------------------- -------- --------- - ----------------------- --------------- ------------------------------- - -------------------------------
这里我们先创建了一个渲染器（renderer）和一个舞台（stage）。然后使用 EaselJS 类创建了一个 easel 实例。这个实例需要我们不断调用它的 update() 方法来更新画布。最后通过 requestAnimationFrame 方法不断调用 animate() 方法实现画面的不断更新。
绘制 2D 图形
接下来，我们来看一下 easel-gl 绘制 2D 图形的用法。
绘制直线
const graphics = new PIXI.Graphics(); graphics.lineStyle(2, 0xffffff); graphics.moveTo(50, 50); graphics.lineTo(250, 250); stage.addChild(graphics);
上面的代码创建了一个 Graphics 实例，并使用 lineStyle 方法设置了线条的样式，接着使用 moveTo 和 lineTo 方法绘制了一条直线。最后，把该图形添加到了舞台中。
绘制矩形
const graphics = new PIXI.Graphics(); graphics.beginFill(0xff0000); graphics.drawRect(50, 50, 200, 100); stage.addChild(graphics);
上面的代码创建了一个 Graphics 实例，并使用 beginFill 方法设置了填充色，接着使用 drawRect 方法绘制了一个矩形。最后，把该图形添加到了舞台中。
绘制圆形
const graphics = new PIXI.Graphics(); graphics.beginFill(0xff0000); graphics.drawCircle(200, 200, 50); stage.addChild(graphics);
上面的代码创建了一个 Graphics 实例，并使用 beginFill 方法设置了填充色，接着使用 drawCircle 方法绘制了一个圆形。最后，把该图形添加到了舞台中。
绘制多边形
-- -------------------- ---- ------- ----- -------- - --- ---------------- ----- ------ - - -- -- --- ---- ---- -- -- ----------------------------- ----------------------------- -------------------------
上面的代码创建了一个 Graphics 实例，并使用 beginFill 方法设置了填充色，接着使用 drawPolygon 方法绘制了一个三角形。最后，把该图形添加到了舞台中。
绘制 3D 图形
除了绘制 2D 图形，easel-gl 还支持绘制 3D 图形。下面我们以绘制一个立方体为例，讲解一下如何使用 easel-gl 绘制 3D 图形。
-- -------------------- ---- -------
----- ----- - --- ---------------------
----- ---- - ------------------
--------- -
---- -- ---- --- -- ---- --- --- ---- ---- --- ----
---- -- --- --- -- --- --- --- --- ---- --- ---
--
-------- -
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
--
---
-------------------- -- -----
------------------- ---- -----
------------------------- - -- ------- - -- ---
---------------------上面的代码创建了一个立方体的 mesh 实例，其中 vertices 是立方体的顶点坐标，indices 是立方体各个面的顶点索引。接着设定了 mesh 实例的位置、缩放和旋转，最后把该 mesh 实例添加到了舞台中。
总结
通过本文的介绍，相信读者已经了解了如何安装和使用 easel-gl npm 包，并能够快速地绘制 2D 和 3D 图形。在实际开发中，我们也可以根据自己的需求对 easel-gl 进行二次开发，以满足更为复杂的绘图需求。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
-------
------
------- ---------------------------
--------
------ - -- ---- ---- ----------
------ - ------- - ---- -----------
----- -------- - --- --------------- ------ ---- ------- --- ---
-----------------------------------------
----- ----- - --- -----------------
----- ----- - --- ---------------------
----- -------- - --- ----------------
--------------------- ----------
------------------- ----
-------------------- -----
-------------------------
----- ---- - ------------------
--------- -
---- -- ---- --- -- ---- --- --- ---- ---- --- ----
---- -- --- --- -- --- --- --- --- ---- --- ---
--
-------- -
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
-- -- -- -- -- --
--
---
-------------------- -- -----
------------------- ---- -----
------------------------- - -- ------- - -- ---
---------------------
-------- --------- -
-----------------------
---------------
-------------------------------
-
-------------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8981e8991b448d9295