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

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

问题描述

请告诉我你知道在HTML5 Canvas中绘制和处理矢量图形的库是什么?



谢谢!!!

解决方案

有几个选项。我没有使用这些图书馆,但从我可以告诉蛋糕似乎一般更令人印象深刻,并进口,虽然也是三倍大。还有Burst Engine,目前是processing.js的扩展,它甚至更小。我确定还有其他几个。



Processing.js



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



大小:412 KB



Raphael



Raphaël是一个小的JavaScript库,应该简化您在网络上使用矢量图形的工作,如果您想创建自己的特定图表或图像裁剪和旋转小部件,
Raphaël使用SVG W3C Recommendation和VML作为创建图形的基础,这意味着你创建的每个图形对象也是一个DOM对象,所以你可以附加Raphaël的目标是提供一个适配器,使绘图矢量艺术兼容跨浏览器和易于使用。



大小:60 KB

Snap.svg



Raphaël的继承人。



Snap为网站开发人员提供了一个干净,简洁,直观和强大的API,用于动画和操作现有的SVG内容和使用Snap生成的SVG内容。



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

大小:66 KB



蛋糕



CAKE是一个用于canvas标签的场景图形库,你可以说它像SVG XML并不会太远。



大小:212 KB



Paper.js



Paper.js是一个开源的矢量图形脚本框架,



突发引擎



突发引擎是一个OpenSource向量动画引擎用于HTML5 Canvas元素。 Burst为Flash提供类似的Web功能,并包含一个基于层的动画系统,如After Effects。 Burst使用非常轻量的JavaScript框架,这意味着你的动画将不可思议地快速下载,并且可以使用非常简单的JavaScript命令控制,允许链接和回调。 ... Burst目前是由John Resig开发的极好的动画端口Processing.js的扩展。独立的爆发引擎的发展正在进行。当你想使用Burst而不使用jQuery或Processing.js时,这将减少加载时间和内存使用。



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



它似乎最近一次更新于2010年。



大小:52.6 KB



使用.context直接绘制到画布



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


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

Thank you!!!

解决方案

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.

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

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