【问题标题】:HTML5 Canvas Vector Graphics? [closed]HTML5 画布矢量图形? [关闭]
【发布时间】:2022-03-10 15:54:35
【问题描述】:

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

谢谢!!!

【问题讨论】:

标签: html canvas vector-graphics


【解决方案1】:

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

Processing.js

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

大小:412 KB

Raphael

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

大小:60 KB

Snap.svg

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

“Snap 为 Web 开发人员提供了一个干净、精简、直观且功能强大的 API,用于动画和操作现有的 SVG 内容以及使用 Snap 生成的 SVG 内容。

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

大小:66 KB

Cake

“CAKE 是一个用于画布标签的场景图库。你可以说它就像 SVG 没有 XML 一样,并且相差不远。”

大小:212 KB

Paper.js

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

大小:627.91 KB

The Burst Engine

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

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

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

大小:52.6 KB

drawing directly to the canvas with .context

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

【讨论】:

  • 不客气!让我知道什么对你有用。
  • 添加了您提到的库的链接。
  • burst 引擎链接已失效,我认为这是新链接github.com/rwldrn/burst-core
  • 您还应该添加一个纸质书呆子的答案,以使列表完整。 paperjs.org 看起来棒极了
【解决方案2】:

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

【讨论】:

    【解决方案3】:

    http://raphaeljs.com/ 适用于 SVG

    【讨论】:

      【解决方案4】:
      【解决方案5】:

      http://canvimation.github.com/ 是一个开源应用程序,允许您在屏幕上绘制图形并使用画布标签和上下文命令将结果导出为网页以重现绘图。有一些动画可用。它正在开发中。帮助页面也可用。

      【讨论】: