HTML5 画布矢量图形? [英] HTML5 Canvas Vector Graphics?

查看:26
本文介绍了HTML5 画布矢量图形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Please tell me what libraries for drawing and handling of vector graphics within HTML5 Canvas do you know?

谢谢!!!

推荐答案

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

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 是流行的 Processing 可视化编程语言的姊妹项目......"

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

大小:412 KB

拉斐尔

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

"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."

大小:60 KB

Snap.svg

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

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

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

"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.

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

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

大小:66 KB

蛋糕

CAKE 是一个用于 canvas 标签的场景图形库.你可以说它就像 SVG 没有 XML 一样,并且不会太远."

"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."

大小:212 KB

Paper.js

Paper.js 是一个开源矢量图形脚本框架,运行在 HTML5 Canvas 之上."

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

大小:627.91 KB

Size: 627.91 KB

突发引擎

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

"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.

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

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."

它似乎也是在 2010 年更新的.

It also seems it was last updated in 2010.

大小:52.6 KB

使用 .context 直接绘制到画布

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

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

这篇关于HTML5 画布矢量图形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆