HTML5 画布矢量图形？

Question

请告诉我您知道哪些用于在 HTML5 Canvas 中绘制和处理矢量图形的库？

谢谢！！！

原文由 Edward83 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有几个选项。我没有使用过这两个库中的任何一个，但据我所知，Cake 似乎通常更令人印象深刻，并且是进口的，同时也是三倍大。还有 Burst Engine，目前是 processing.js 的扩展，它更小。我敢肯定还有更多。

处理.js

“Processing.js 是流行的 Processing 可视化编程语言的姊妹项目……”

大小：412 KB

拉斐尔

“Raphaël 是一个小型 JavaScript 库，可以简化您在网络上使用矢量图形的工作。例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用这个库简单轻松地实现它。Raphaël使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Raphaël 的目标是提供一个适配器，使绘图矢量艺术兼容跨浏览器且简单。”

大小：60 KB

快照.svg

拉斐尔的继任者。由同一开发人员编写，但仅适用于现代浏览器。

“Snap 为 Web 开发人员提供了一个干净、流线型、直观且功能强大的 API，用于对现有 SVG 内容和使用 Snap 生成的 SVG 内容进行动画处理和操作。

通过为动画提供简单直观的 JavaScript API，Snap 可以帮助您的 SVG 内容更具交互性和吸引力。”

大小：66 KB

蛋糕

“CAKE 是画布标签的场景图库。你可以说它就像没有 XML 的 SVG，而且相差无几。”

大小：212 KB

纸.js

“Paper.js 是一个在 HTML5 Canvas 之上运行的开源矢量图形脚本框架。”

大小：627.91 KB

突发引擎

“Burst Engine 是一个用于 HTML5 Canvas 元素的开源矢量动画引擎。Burst 提供与 Flash 类似的网络功能，并包含一个基于图层的动画系统，如 After Effects。Burst 使用非常轻量级的 JavaScript 框架，这意味着您的动画将在不知不觉中下载快速并且可以使用非常简单的 JavaScript 命令进行控制，允许链接和回调。…Burst 目前是 John Resig 的优秀动画端口 Processing.js 的扩展。独立的 Burst 引擎的开发正在进行中。这将当您想在不使用 jQuery 或 Processing.js 的情况下使用 Burst 时，减少加载时间和内存使用量。

注意：Burst 的未来版本还将作为本地处理应用程序运行，允许您在 Java 小程序或二进制可执行文件中运行 Burst 动画。”

似乎它最后一次更新是在 2010 年。

大小：52.6 KB

使用 .context 直接绘制到画布上

这不是外部库，而是通过 javascript 直接绘制到画布上。

原文由 expiredninja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

http://paperjs.org/ 最近宣布。太奇妙了。

原文由 a paid nerd 发布，翻译遵循 CC BY-SA 3.0 许可协议