8 个JavaScript免费和开源绘图库推荐

图像和动画具有吸引力、娱乐性，非常适合传达仅用书面文字难以处理和理解的信息。这适用于您使用相机拍摄的照片以及您使用计算机创建的绘图。在这篇文章中，我将向您展示一些最好的免费和开源 javascript 绘图库。

有很多免费库使用html5 canvas元素和svg等技术在浏览器中绘制您想要的任何内容。您可以使用这些库提供的api不仅可以绘制，还可以为您创建的任何内容设置动画。

让我们开始吧。

Two.js

在使用 JavaScript 绘制 2D 形状时， Two.js是一个非常流行且易于使用的库。它有很好的文档记录，您将不得不花很少的时间学习基础知识。

关于图书馆，您会喜欢两件事。首先，它与渲染无关。这意味着您可以使用相同的 API 在画布元素、SVG 或 WebGL 上绘制图形。当我使用这个库时，这个功能已经多次救了我。其次，该库还带有内置功能，可以为您在屏幕上绘制的任何内容设置动画。

您还可以通过监听不同的键盘和鼠标事件来更新您在屏幕上绘制的不同元素的大小、位置和颜色，从而更轻松地创建简单的游戏。

上面Jono Brandel的示例使用 Two.js 在画布上创建动画波浪形道路。您可以在官方网站上找到更多有趣的项目。

Paper.js

Paper.js库是另一个免费的开源解决方案，适用于想要使用 javaScript 进行绘图的人。该库用于canvas处理其绘图动画。然而，它的主要焦点是基于矢量的绘图而不是光栅图像。

有两个选项供您使用库创建图形。您可以继续使用常规 JavaScript，也可以考虑使用库称为 PaperScript 的 JavaScript 修改版本。使用 PaperScript 将需要您花费一些额外的时间来学习如何使用它。但是，它具有一些优点，例如更容易计算整个库中使用的Point和对象。Size

您可以使用该库做很多有趣的事情，包括嵌套层、简单路径和复合路径等功能。您还可以平滑使用库绘制的曲线。您还可以使用混合模式使不同元素之间的重叠更具视觉吸引力。

Alberto Jerez的上述 CodePen使用了这些层和合成功能来创建有趣的效果，圆圈在碰撞时会改变形状。

P5.js

p5.js 库对于正在寻找没有陡峭学习曲线但可以在必要时创建非常复杂的系统的库的人来说是一个很好的选择。官网P5.js入门页面有一个功能示例，只需几行代码即可在任何移动鼠标的地方绘制圆圈。

该库的灵感来自流行的 Java处理平台，它拥有一个活跃的社区，可以在您遇到困难时为您提供帮助。有很多可用的示例展示了该库的功能。当您寻找灵感时，它们是一个很大的帮助。您可以使用它们来学习如何模拟物理、创建粒子系统以及对不同的用户输入做出反应。

上面Johan Karlsson的示例使用 p5.js 创建了一些在画布上随机移动的 gnat。单击演示中的任意位置将创建一个新的随机放置的 gnat 种群。

Konva

Konva 库与我之前提到的库有点不同。您可以使用它在画布上绘制基本形状，但您完全可以做更多的事情。您可以添加高性能动画和过渡，为您在画布上绘制的任何内容添加视觉吸引力。

这个库的特别之处在于它允许您将事件处理程序附加到您在屏幕上绘制的任何内容。您可以在画布上选择和移动先前绘制的对象。也可以缩放和旋转选定的对象，而不会影响您绘制的任何其他内容。

这些功能非常适合那些想要一个可以帮助他们创建简单草图应用程序以及在画布上拖放游戏的库的人。您可以使用组一起移动和操纵多个形状。

上面这个简单的益智游戏是由Jakub Beneš使用 Konva 构建的。基本思想是选择颜色与其他颜色略有不同的框。

Fabric.js

Fabric.js库建立在与 Konva 相同的理念之上，并具有许多相同的功能。事实上，Fabric.js 实际上似乎比 Konva 更流行、更活跃。

canvas该库提供了一个构建在元素之上的交互式对象模型。这基本上意味着您可以在画布上绘制不同的对象，例如几何形状和图像，以便以后与它们进行交互。该库为您的用户提供了移动、缩放和旋转他们在画布上绘制的任何内容的选项，允许您构建简单的模型应用程序、模因生成器等。

尝试在上面Martin Florian的 CodePen 中拖动文本或在画布上添加您自己的形状和图像。图书馆的主页展示了更多功能，例如手绘以及使用图案和渐变来填充形状。

Snap.svg

Snap.svg库是希望使用 SVG 和 JavaScript 创建与分辨率无关的矢量图形的人们的热门选择。该库是开源的，完全免费使用。

它带有一个干净而强大的 API 来操作和动画任何现有的 SVG 内容，以及动态生成 SVG 内容。该库的开发考虑了对 IE9 及更高版本的支持。这使开发人员可以更轻松地提供遮罩、剪辑和模式等功能，而无需担心对旧浏览器的支持。

这个易于使用的库提供了许多方法来创建基本形状和应用属性，如fill、stroke和strokeWidth使用键值对。您还可以将元素组合在一起以一次更改多个项目。不同的对象可以通过它们的名称或适当的css选择器轻松引用。查看下面的示例，作者是Ronan Levesque。

SVG.js

如果您想使用 JavaScript 绘制和动画 SVG，另一个流行的选择是使用SVG.js 库。使用这个库的开发人员的目标是使其尽可能小和尽可能快，同时提供几乎完整的 SVG 规范覆盖。没有依赖，库可以独立使用。

您可以在网站主页上看到它在 Vanilla JS 和 Snap.svg 方面的表现。可以使用内置函数创建基本形状并将它们添加到 dom。该库带有各种功能来操纵您在屏幕上绘制的任何内容的外观。还支持事件***器，以便您可以实现基于用户交互更改或动画任何 SVG 元素的功能。

尝试更改George Francis编写的上述 CodePen 中不同选项的值，以使用 SVG.js 生成独特的模式。

JS equence Diagrams

我们名单上的最后一个图书馆可能不会吸引大众，但它确实有一个独特的目的，值得一提。您是否曾经参与过必须绘制 UML 序列图的项目？如果你说是，那么JS 序列图库可能对你来说是完美的。

该库将使用 JavaScript 快速为您创建一个简单的基于 SVG 的序列图。您需要做的就是为其提供有效的文本表示。您可能不喜欢的一件事是该库依赖于一堆其他库才能正常工作。这包括 Snap.svg、Web font Loader、underscore.js 和可选的jquery。

但是，对于想要快速生成此类图表而不必担心编写大量代码的人来说，该库仍然是一个不错的选择。您还可以应用自己的 CSS 样式来更改不同组件的颜色和填充。看看上面的ET演示，并尝试编辑代码以查看图表如何变化。

最后的想法

有很多免费库可用于使用 JavaScript 绘制对象。我在这篇文章中的目标是突出一些流行的库，这些库具有不错的功能集，可以解决独特的问题。希望本文能帮助您选择一个可以在画布上以及使用 SVG 绘制和动画元素的库。