介绍
cells-js 是一个基于 canvas 的图形库，可以用于绘制复杂的几何图形。它可以快速创建一些基本图形（如矩形、圆形等），同时也支持绘制复杂的图形。
cells-js 提供了许多函数和方法，用于绘制和编辑图形。这篇文章将介绍如何安装和使用 cells-js，并提供一些简单的示例代码帮助你入门。
安装
你可以通过 npm 安装这个 npm 包，也可以从 GitHub 获取源代码。
通过 npm 安装
在终端中执行以下命令：
npm install cells-js
如果你想在局部安装，可以加上 -D 参数：
npm install cells-js -D
从 GitHub 获取源代码
你可以从 GitHub 获取源代码：
git clone https://github.com/CJ-McArthur/cells-js.git
使用
创建画布
首先，我们需要创建一个画布。在 HTML 中创建一个 canvas 元素：
<canvas id="myCanvas"></canvas>
在 JavaScript 中获取该元素，并设置画布大小：
const canvas = document.getElementById('myCanvas');
canvas.width = 800;
canvas.height = 600;绘制矩形
现在，我们可以使用 cells-js 绘制一个矩形了。在 JavaScript 中，引入 cells-js 模块：
const { Rectangle } = require('cells-js');然后，通过绘制矩形实例化一个矩形对象，并调用绘制方法绘制到画布上：
-- -------------------- ---- ------- ----- ---- - --- ----------- -- ---- -- ---- ------ ---- ------- ---- ------ ------- --- ------------------
绘制圆形
绘制圆形同样简单。首先，引入 cells-js 模块：
const { Circle } = require('cells-js');然后，通过绘制圆形实例化一个圆形对象，并调用绘制方法绘制到画布上：
const circle = new Circle({
x: 400,
y: 300,
radius: 100,
color: 'red',
});
circle.draw(canvas);绘制线条
cells-js 也可以用于绘制线条。引入 cells-js 模块：
const { Line } = require('cells-js');然后，通过绘制线条实例化一个线条对象，并调用绘制方法绘制到画布上：
-- -------------------- ---- ------- ----- ---- - --- ------ --- --- --- --- --- ---- --- ---- ------ -- ------ -------- --- ------------------
绘制路径
当需要绘制更加复杂的图形时，可以使用路径。
首先，引入 cells-js 模块：
const { Path } = require('cells-js');然后，定义一个路径数组，定义路径的顶点：
const path = new Path({
points: [
{x: 100, y: 100},
{x: 300, y: 100},
{x: 200, y: 250},
],
color: 'green',
});最后，调用绘制方法即可绘制到画布上：
path.draw(canvas);
编辑图形
除了绘制图形，cells-js 还提供了编辑图形的方法。例如，我们可以更改矩形的颜色和位置：
rect.color = 'yellow'; rect.x = 200; rect.draw(canvas);
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
-------
------ -
------- --- ----- ------
-
--------
-------
------
------- -----------------------
--------
----- ------ - ------------------------------------
------------ - ----
------------- - ----
----- - ---------- ------- ----- ---- - - --------------------
----- ---- - --- -----------
-- ----
-- ----
------ ----
------- ----
------ -------
---
----- ------ - --- --------
-- ----
-- ----
------- ----
------ ------
---
----- ---- - --- ------
--- ---
--- ---
--- ----
--- ----
------ --
------ --------
---
----- ---- - --- ------
------- -
--- ---- -- -----
--- ---- -- -----
--- ---- -- -----
--
------ --------
---
------------------
--------------------
------------------
------------------
------------- -- -
---------- - ---------
------ - ----
------------------
-- ------
---------
-------
-------总结
本文介绍了如何使用 cells-js，包括安装、绘制基本图形、绘制路径、编辑图形等内容。希望能够帮助读者熟练掌握该 npm 包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ced81e8991b448da893