介绍
redrawjs 是一个开源的前端 JavaScript 库，可用于在网页上动态地渲染 SVG 图形。它具有灵活的 API 和优秀的性能，在业界得到了广泛的应用。
安装
在使用 redrawjs 之前，需要先在当前项目的根目录下使用 npm 进行安装。
通过 npm 安装：
npm install redrawjs --save
示例代码
下面是一个简单的代码示例，它会在一个网页上绘制一个圆形：
import { SVG, Circle } from 'redrawjs';
const svg = new SVG(document.querySelector('#canvas'), { width: 400, height: 400 });
svg.add(new Circle(200, 200, 100).color('red').fill());入门指南
让我们来逐步学习如何使用 redrawjs 来创建 SVG 图形。
创建 SVG 对象
首先，我们需要创建一个 SVG 对象来承载我们的图形。
import { SVG } from 'redrawjs';
const svg = new SVG(document.querySelector('#canvas'), { width: 400, height: 400 });在上面的代码中，我们使用 SVG 类从文档中获取画布元素并设置宽度和高度。
创建图形对象
接下来，我们需要创建一个图形对象。 redrawjs 提供了许多不同类型的图形对象，包括线条、矩形、圆形、多边形等等。
在这个例子中，我们将创建一个圆形对象。
import { Circle } from 'redrawjs';
const circle = new Circle(200, 200, 100);上面的代码创建了一个圆形对象，并指定了圆心的 x 和 y 坐标，以及半径。
将图形对象添加到 SVG 中
现在我们已经创建了一个 SVG 对象和一个图形对象。我们需要将图形对象添加到 SVG 对象中，以便它可以在画布上显示。
svg.add(circle);
上面的代码将圆形对象添加到 SVG 对象中。
设置样式
我们可以使用 color()、fill() 和 stroke() 方法设置图形的颜色和边框样式。
circle.color('red').fill();上面的代码将圆形对象的颜色设置为红色，并使其填充。
渲染图形
最后，我们需要调用 redraw() 方法，将所有添加的图形对象渲染到画布上。
svg.redraw();
上面的代码将所有的图形对象渲染到画布上。
总结
通过本文，我们学习了如何使用 redrawjs 库来创建和渲染 SVG 图形。尽管本文只是一个简单的介绍，但它们提供了一个很好的起点，帮助你建立基础并开始创建自己的 SVG 图形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a51