Top 8 JavaScript Drawing Libraries: Free and Open-Source

图像和动画引人入胜、有趣，非常适合传达仅用书面文字难以处理和理解的信息。对于用相机拍摄的照片以及使用计算机创建的绘图来说都是如此。在这篇文章中，我将向您展示一些最好的免费开源 JavaScript 绘图库。

有很多免费库使用 HTML5 canvas 元素和 SVG 等技术在浏览器中绘制您想要的任何内容。您不仅可以使用这些库提供的 API 进行绘制，还可以对您创建的任何内容进行动画处理。

让我们开始吧。

两个.js

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

立即学习“Java免费学习笔记（深入）”；

您会喜欢这个图书馆的两件事。首先，它与渲染无关。这意味着您可以使用相同的 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 创建一些在画布上随机移动的小昆虫。单击演示中的任意位置将创建一组随机放置的新蚊虫。

康瓦

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

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

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

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

Fabric.js

Fabric.js 库的构建理念与 Konva 相同，并且具有许多相同的功能。事实上，Fabric.js 实际上似乎比 Konva 更受欢迎、更活跃。

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

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

Snap.svg

对于想要使用 SVG 和 JavaScript 的强大功能创建与分辨率无关的矢量图形的人们来说，Snap.svg 库是一个流行的选择。该库是开源的并且完全免费使用。

它配备了一个干净而强大的 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 时序图

我们列表中的最后一个库可能不会吸引大众，但它确实有一个独特的用途，值得一提。您是否曾经参与过必须绘制 UML 序列图的项目？如果您同意，那么 JS 序列图库可能非常适合您。

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

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

最终想法

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

Top 8 JavaScript Drawing Libraries: Free and Open-Source的详细内容，更多请关注红帽云邮其它相关文章！