ZRender 是一个轻量级的 Canvas 绘图库，它提供了丰富的图形 API，支持动画、事件交互等功能，适用于数据可视化、游戏等领域。在本文中，将介绍如何使用 npm 包 ZRender。
安装 ZRender
在项目中安装 ZRender 包，可以使用 npm 命令：
npm install zrender
创建画布
创建 ZRender 实例前，需要先准备一个 HTML 元素作为容器，并设置其样式和大小。例如，可以创建一个 div 容器，并设置宽度和高度：
<div id="my-canvas" style="width: 600px; height: 400px;"></div>
然后，在 JavaScript 中创建 ZRender 实例并指定容器：
import zrender from 'zrender';
const container = document.getElementById('my-canvas');
const zr = zrender.init(container);以上代码中，首先引入了 ZRender 包，并通过 document.getElementById 获取到了容器元素。然后，调用 zrender.init 方法创建了 ZRender 实例，并将容器传递给该方法。
绘制图形
ZRender 提供了多种图形类型，包括圆形、矩形、多边形、线条等。下面以绘制一个圆形为例：
-- -------------------- ---- -------
------ ------- ---- ----------
----- --------- - -------------------------------------
----- -- - ------------------------
----- ------ - --- ----------------
------ -
--- ----
--- ----
-- --
--
------ -
----- -----
-
---
---------------以上代码中，首先创建了一个 zrender.Circle 实例，并设置了圆心坐标和半径。然后，通过 style 属性设置了填充颜色。最后，调用 zr.add 方法将圆形添加到 ZRender 实例中。
动画效果
ZRender 支持在图形上应用动画效果，可以使用 zrender.animation 模块提供的动画类和缓动函数。下面以圆形移动为例：
-- -------------------- ---- -------
------ ------- ---- ----------
------ --------- ---- ---------------------------
----- --------- - -------------------------------------
----- -- - ------------------------
----- ------ - --- ----------------
------ -
--- ----
--- ----
-- --
--
------ -
----- -----
-
---
---------------
------------------------- -------- -----
----------- -
--- ----
--- ---
--
---------以上代码中，首先引入了 zrender.animation 模块，并创建了一个圆形实例。然后，使用 zrender.animation.animate 方法创建了一个动画对象，并指定要对其进行动画的图形和属性。接着，使用 when 方法指定了动画效果，即在 1000 毫秒内将圆形的圆心移动到 (500, 300)。最后，使用 start 方法启动了动画。
事件交互
ZRender 支持在图形上应用事件交互，包括鼠标事件、键盘事件等。下面以鼠标移入圆形时改变其颜色为例：
-- -------------------- ---- -------
------ ------- ---- ----------
----- --------- - -------------------------------------
----- -- - ------------------------
----- ------ - --- ----------------
------ -
--- ----
--- ----
-- --
--
------ -
----- -----
-
---
---------------------- -- -- -
-------------------- - ----- ------ ---
---
--------------------- -- -- -
-------------------- - ----- ----- ---
---
---------------
--
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------