前言
easygraphics 是一个基于 HTML5 Canvas 的绘图库，可以使用 JavaScript 在 Canvas 上绘制出各种图形，非常适合做可视化展示。本文将介绍 easygraphics 的使用教程，包括安装、使用及示例代码。
安装
easygraphics 是一个 npm 包，可以使用 npm 安装。
$ npm install easygraphics
使用
导入 easygraphics
使用 easygraphics 需要先导入它。
import EasyGraphics from 'easygraphics'
创建 EasyGraphics 实例
使用 easygraphics 的第一步是创建一个 EasyGraphics 实例。
const eg = new EasyGraphics(canvasId)
其中，canvasId 是你要使用 easygraphics 的 Canvas 元素的 id。
绘制图形
创建 EasyGraphics 实例后，就可以使用它的一系列绘图方法来绘制图形了。下面是 easygraphics 支持的绘制方法：
clear()：清空 canvas。drawLine(x1, y1, x2, y2, color, lineWidth)：绘制直线。drawRectangle(x, y, w, h, color, lineWidth, bgColor)：绘制矩形。drawCircle(x, y, r, color, lineWidth, bgColor)：绘制圆形。drawTriangle(x1, y1, x2, y2, x3, y3, color, lineWidth, bgColor)：绘制三角形。drawPolygon(points, color, lineWidth, bgColor)：绘制多边形，points 是一个坐标数组，每个元素为一个对象，形如{ x: 0, y: 0 }。
例如，绘制一条红色宽度为 2 的直线：
eg.drawLine(10, 10, 100, 100, 'red', 2)
高级用法
除了上述的基本绘图方法外，easygraphics 还支持一些高级用法，如：
- 在绘图前设置一些基本样式（线宽、线条颜色等），省去在每次绘图时都设置一遍样式的麻烦。
- 实现图形的动画效果，让图形呈现流畅的变化。
下面是一个实现圆形运动的示例代码：
-- -------------------- ---- ------- ------ ------------ ---- -------------- ----- -- - --- ---------------------- ----- ------- - --- ----- ------- - --- --- ------ - -- --- ----- - - -------- ------------ - ---------- ------------------ -------------------------- ---------------------- -------- ------- - -------- --------- - ----- -- --- ------ -- --------------- ----- - - ------- - ------ - --------------- ----- - - ------- - ------ - --------------- -------------------------- ---------------- -- -- ------------------------------ - ------------ ---------
以上代码实现了一个圆形运动的动画效果，实现的过程中使用了 easygraphics 的一些高级用法，例如：
- 在
drawCircle函数中设置了样式，避免了每次绘制都要设置的麻烦。 - 使用
setFillColor设置填充颜色，实现了动态填充的效果。 - 使用
requestAnimationFrame实现了动画效果，而不是简单地每隔一定时间重新绘制图形。
结束语
easygraphics 是一个非常好用的绘图库，简单易用。这篇文章介绍了 easygraphics 的安装、使用及高级用法，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725a81e8991b448e87dc