web-dev-qa-db-fra.com

Graphiques vectoriels HTML5 Canvas?

Veuillez me dire quelles bibliothèques de dessin et de gestion de graphiques vectoriels dans HTML5 Canvas connaissez-vous?

Je vous remercie!!!

43
Edward83

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 volumineux. 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 frère du populaire langage de programmation visuel Processing ..."

taille: 412 KB

Raphael

"Raphaël est une petite bibliothèque JavaScript qui devrait simplifier votre travail avec des graphiques vectoriels sur le Web. Si vous voulez créer votre propre graphique ou widget spécifique de recadrage et rotation d'image, par exemple, vous pouvez le réaliser simplement et 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 plus tard. L'objectif de Raphaël est de fournir un adaptateur qui fera le dessin cross-browser compatible avec l'art vectoriel et facile. "

Taille: 60 KB

Snap.svg

Le successeur de Raphaël. Écrit par le même développeur mais destiné uniquement aux navigateurs modernes.

"Snap fournit aux développeurs Web une API propre, rationalisée, 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 API JavaScript simple et intuitive pour l'animation, Snap peut aider à rendre votre contenu SVG plus interactif et attrayant. "

Taille: 66 KB

Gâteau

"CAKE est une bibliothèque de scénarios pour la balise canvas. On pourrait dire que c'est comme SVG sans XML et pas trop loin."

Taille: 212 KB

Paper.js

"Paper.js est un cadre de script de graphiques vectoriels open source qui s'exécute au-dessus du canevas HTML5."

Taille: 627.91 KB

Le moteur d'éclatement

"Le moteur Burst est un moteur d'animation vectorielle OpenSource pour l'élément HTML5 Canvas. Burst fournit des fonctionnalités Web similaires à Flash et contient un système d'animation basé sur les calques comme After Effects. Burst utilise un cadre JavaScript très léger, ce qui signifie que vos animations seront téléchargées de manière inaperçue. rapide et peut être contrôlé à 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. Le développement d'un moteur Burst indépendant est en cours. réduire le temps de chargement et l'utilisation de la mémoire lorsque vous souhaitez utiliser Burst sans utiliser jQuery ou Processing.js.

REMARQUE: les futures versions de Burst s'exécuteront également en tant qu'applications de traitement natif, vous permettant d'exécuter une animation Burst dans une applet Java ou en tant qu'exécutable binaire. "

Il semble également qu'il ait été mis à jour pour la dernière fois en 2010.

Taille: 52,6 KB

dessin directement sur la toile avec .context

Ce n'est PAS une bibliothèque externe, mais un dessin directement sur la toile via javascript.

45
expiredninja

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

10
a paid nerd

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

3
saibotd
3

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 à l'aide de la balise canvas et des commandes contextuelles pour reproduire le dessin. Il y a une animation disponible. Il est en cours de développement. Des pages d'aide sont également disponibles.

1
jing3142