Graphiques vectoriels HTML5 sur toile?

Question

S'il vous plaît dites-moi ce que les bibliothèques pour le dessin et le traitement des graphiques vectoriels dans HTML5 Canvas savez-vous?

Merci!

Answer 1

Il y a quelques options. Je n'ai utilisé aucune de ces bibliothèques, mais d'après ce que je peux dire, Cake semble généralement plus impressionnant et importé, tout en étant trois fois plus grand. Il y a aussi le Burst Engine, actuellement une extension de processing.js, qui est encore plus petit. Je suis sûr qu'il y en a plusieurs autres.

Processing.js

"Processing.js est le projet soeur du populaire langage de programmation visuelle de traitement ..."

Taille: 412 KB

Raphael

« Raphaël est un petit Une bibliothèque JavaScript qui devrait simplifier votre travail avec des graphiques vectoriels sur le web Si vous voulez créer votre propre graphique spécifique ou votre widget de recadrage d'image et de rotation, par exemple, vous pouvez le réaliser simplement d facilement avec cette bibliothèque. Raphaël utilise la recommandation SVG W3C et VML comme base pour créer des graphiques. Cela signifie que chaque objet graphique que vous créez est également un objet DOM, vous pouvez donc attacher des gestionnaires d'événements JavaScript ou les modifier ultérieurement. Le but de Raphaël est de fournir un adaptateur qui fera de dessin vectoriel art cross-browser compatible et facile «

Taille:.. 60 KB

Snap.svg

Le successeur de Raphaël écrit par le même développeur, mais destinée "Snap fournit aux développeurs web une API propre, rationnelle, intuitive et puissante pour animer et manipuler à la fois le contenu SVG existant et le contenu SVG généré avec Snap.

En fournissant une solution simple et intuitive API JavaScript pour l'animation Snap peut aider à rendre votre contenu SVG plus interactif et attrayant "

Taille: 66 KB

Cake

". CAKE est un SceneGraph bibliothèque pour l'étiquette de toile. On pourrait dire que c'est comme SVG sans XML et ne pas être trop loin "

Taille: 212 KB

Paper.js

". Paper.js est un cadre de script de graphiques vectoriels open source qui fonctionne sur haut de la toile HTML5. "

Taille: 627.91 KB

The Burst Engine

« Le moteur de Burst est un moteur d'animation vecteur OpenSource pour l'élément Canvas HTML5. Burst fournit des fonctionnalités Web similaire à Flash et contient un système d'animation à base de couche comme After Effects. Burst utilise un très léger poids de l'image JavaScript, ce qui signifie que vos animations seront téléchargées rapidement et peuvent être contrôlées à l'aide de commandes JavaScript très simples, permettant le chaînage et les rappels ... Burst est actuellement une extension de l'excellent port d'animation Processing.js de John Resig. un moteur Burst Engine indépendant est en cours, ce qui réduit le temps de chargement et l'utilisation de la mémoire lorsque vous voulez utiliser Burst sans utiliser jQuery ou Processing.js

REMARQUE: Les futures versions de Burst fonctionneront également comme des applications de traitement natif, vous permettant d'exécuter une animation Burst dans une applet Java ou un exécutable binaire. "

Il semble également été mise à jour en 2010.

Taille: 52,6 KB

drawing directly to the canvas with .context

Ce n'est pas une bibliothèque externe, mais tirant directement sur la toile par javascript.

Answer 2

http://raphaeljs.com/ fonctionne bien avec SVG

Answer 3

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

Answer 4

http://paperjs.org/ a été annoncé récemment. C'est incroyable.

Answer 5

http://canvimation.github.com/ est une application open-source qui vous permet de dessiner des graphiques à l'écran et d'exporter les résultats sous forme de page Web en utilisant la balise canvas et les commandes de contexte pour reproduire le dessin. Il y a de l'animation disponible. Il est en développement. Les pages d'aide sont également disponibles.