HTML5 Canvas Vector Graphics?

Question

Por favor dígame qué librerías para dibujar y manejar gráficos vectoriales dentro de HTML5 Canvas, ¿sabe?

Gracias!

Answer 1

Hay algunas opciones. No he usado ninguna de estas bibliotecas, pero por lo que puedo decir, Cake parece generalmente más impresionante e importada, aunque también es tres veces más grande. También está Burst Engine, actualmente una extensión de processing.js, que es aún más pequeña. Estoy seguro de que hay varios más por ahí.

Processing.js

"Processing.js es el proyecto de la hermana del lenguaje de programación Visual Processing populares ..."

tamaño: 412 KB

Raphael

"Rafael es una pequeña La biblioteca JavaScript debe simplificar su trabajo con gráficos vectoriales en la web. Si desea crear su propio gráfico o recorte de imagen y rotar el widget, por ejemplo, puede lograrlo simplemente d fácilmente con esta biblioteca. Raphaël usa la Recomendación SVG W3C y VML como base para crear gráficos. Esto significa que cada objeto gráfico que crees también es un objeto DOM, por lo que puedes adjuntar controladores de eventos JavaScript o modificarlos más tarde. El objetivo de Raphaël es proporcionar un adaptador que hará que el dibujo del arte del vector compatible entre navegadores y fácil "

Tamaño:.. 60 KB

Snap.svg

El sucesor de Rafael Escrito por el mismo desarrollador, pero la intención solo para navegadores modernos.

"Snap brinda a los desarrolladores web una API limpia, optimizada, intuitiva y potente para animar y manipular el contenido SVG existente y el contenido SVG generado con Snap.

Al proporcionar una sencilla e intuitiva API de JavaScript para la animación, Snap puede ayudar a hacer su contenido SVG más interactivo y atractivo "

Tamaño: 66 KB

Cake

". La torta es una scenegraph biblioteca para la etiqueta del lienzo. Se podría decir que es como sans SVG el XML y no estar demasiado lejos "

Tamaño: 212 KB

Paper.js

". Paper.js es un marco de gráficos vectoriales de secuencias de comandos de código abierto que se ejecuta en parte superior del Canvas HTML5. "

Tamaño: 627.91 KB

The Burst Engine

"El motor de explosión es un motor de animación OpenSource vector para el elemento HTML5 Canvas. Ráfaga proporciona una funcionalidad web similar a Flash y contiene un sistema de animación basada capa, como After Effects. Ráfaga utiliza una muy ligera -peso de marco de JavaScript, lo que significa que sus animaciones se descargarán rápidamente y pueden controlarse usando comandos de JavaScript muy simples, permitiendo el encadenamiento y las devoluciones de llamada ... Actualmente, Burst es una extensión del excelente puerto de animación Processing.js de John Resig. un Motor de Ráfaga independiente está en camino. Esto reducirá el tiempo de carga y el uso de memoria cuando desee utilizar Ráfaga sin usar jQuery o Processing.js.

NOTA: Las versiones futuras de Burst también se ejecutarán como aplicaciones de procesamiento nativo, lo que le permitirá ejecutar una animación de ráfaga en un applet de Java o como un ejecutable binario ".

También parece que se actualizó por última en 2010.

Tamaño: 52,6 KB

drawing directly to the canvas with .context

Ésta no es una biblioteca externa, pero dibujando directamente a la lona a través de JavaScript.

Answer 2

http://raphaeljs.com/ funciona bien con SVG

Answer 3

http://glimr.rubyforge.org/cake/canvas.html (cakejs)

Answer 4

http://paperjs.org/ se anunció recientemente. Es asombroso.

Answer 5

http://canvimation.github.com/ es una aplicación de código abierto que le permite dibujar gráficos en la pantalla y exportar los resultados como una página web utilizando la etiqueta canvas y los comandos de contexto para reproducir el dibujo. Hay algo de animación disponible. Está en desarrollo. Las páginas de ayuda también están disponibles.