HTML5 画布矢量图形?

发布于 2024-10-05 22:12:01 字数 1539 浏览 8 评论 0 原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

爱殇璃 2024-10-12 22:12:01

有几种选择。我没有使用过这两个库,但据我所知,Cake 似乎总体上更令人印象深刻,而且是导入的,同时大小也是原来的三倍。还有 Burst Engine,目前是processing.js 的扩展,它更小。我确信还有更多。

Processing.js

“Processing.js 是流行的Processing可视化编程语言的姐妹项目..."

大小:412 KB

Raphael

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

大小:60 KB

Snap .svg

Raphaël 的继承者,由同一位开发人员编写,但仅适用于现代浏览器

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

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

大小:66 KB

Cake

"CAKE 是画布标签的场景图形库。你可以说它就像没有 XML 的 SVG,并且相差不远。”

大小:212 KB

Paper.js

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

大小:627.91 KB

Burst Engine

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

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

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

大小:52.6 KB

使用 .context 直接绘制到画布

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

There are a few options. I haven't used either of these libraries, but from what I can tell Cake seems generally more impressive, and imported, while also being three times as large. There is also the Burst Engine, currently an extension of processing.js, which is even smaller. I'm sure there are several more out there.

Processing.js

"Processing.js is the sister project of the popular Processing visual programming language..."

size: 412 KB

Raphael

"Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy."

Size: 60 KB

Snap.svg

The successor to Raphaël. Written by the same developer but intended only for modern browsers.

"Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.

By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging."

Size: 66 KB

Cake

"CAKE is a scenegraph library for the canvas tag. You could say that it's like SVG sans the XML and not be too far off."

Size:212 KB

Paper.js

"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas."

Size: 627.91 KB

The Burst Engine

"The Burst Engine is an OpenSource vector animation engine for the HTML5 Canvas element. Burst provides similar web functionality to Flash and contains a layer based animation system like After Effects. Burst uses a very light-weight JavaScript frame, meaning your animations will download unnoticably quick and can be controlled using very simple JavaScript commands, allowing for chaining and callbacks. ... Burst is currently an extension of the excellent animation port Processing.js by John Resig. Development of an independant Burst Engine is under-way. This will reduce load-time and memory usage when you want to use Burst without using jQuery or Processing.js.

NOTE: Future versions of Burst will also run as a Native Processing applications, allowing you to run a Burst animation in a Java applet or as a binary executable."

It also seems it was last updated in 2010.

Size: 52.6 KB

drawing directly to the canvas with .context

This is NOT an external library, but drawing directly to the canvas through javascript.

半衬遮猫 2024-10-12 22:12:01

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

http://paperjs.org/ was announced recently. It's amazing.

睡美人的小仙女 2024-10-12 22:12:01

http://raphaeljs.com/ 与 SVG 配合良好

http://raphaeljs.com/ works well with SVG

↘紸啶 2024-10-12 22:12:01

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

http://canvimation.github.com/ is an open-source application that allows you to draw graphics on screen and export the results as a webpage using the canvas tag and context commands to reproduce the drawing. There is some animation available. It is under development. Help pages are also available.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文