Quel est l'état actuel de l'art dans les bibliothèques et frameworks JavaScript de canevas HTML? [fermé]

J'étudie actuellement des options pour travailler avec le canevas dans une nouvelle application HTML 5 et je me demandais quel est l'état actuel de la technique dans les bibliothèques et les frameworks JavaScript de canevas HTML?

En particulier, existe-t-il des cadres qui prennent en charge le type de choses nécessaires au développement de jeux - animation complexe, gestion des graphiques de scène, gestion des événements et des interactions des utilisateurs?

Aussi prêt à envisager des produits commerciaux et open source.

J'ai travaillé sur fabric.js - une bibliothèque de canevas pour vous aider exactement - à manipuler des objets sur un canevas, en gérant les événements et les interactions des utilisateurs. Il n'est pas encore sorti, mais jetez un œil à une simple démo de prévisualisation .

Vous pouvez également le voir en action dans cet éditeur de conception , pour lequel il a été créé à l'origine.

Edit: Le projet est maintenant disponible sur github (open-source sous licence MIT)

Pour commencer, consultez:

• Démos (simples et complexes, avec du code pour montrer comment elles sont faites)
• Présentation Fabric.js à FalsyValues (et une autre à BK.js )
• Wiki sur github (y compris la FAQ )
• Documentation
• Groupe Google (posez vos questions ici)
• Fabric.js sur Twitter (ou courtes questions via Twitter)
• Introduction à Fabric.js: Partie 1 (article sur ScriptJunkie)
• Introduction à Fabric.js: Partie 2 (article sur ScriptJunkie)

Comment Fabric se compare-t-il aux autres bibliothèques de canevas Javascript? Voici un tableau de comparaison .

Je suis surpris que personne n'ait mentionné WebGL et les frameworks basés dessus. Je le considérerais comme haut de la liste pour l'état de l'art des graphiques 3D accélérés par GPU et des animations complexes sur toile HTML / javascript.

WebGL est une norme Web multiplateforme et libre de droits pour une API graphique 3D de bas niveau basée sur OpenGL ES 2.0, exposée via l'élément HTML5 Canvas en tant qu'interfaces de modèle d'objet de document. ...

WebGL apporte la 3D sans plugin sur le Web, implémentée directement dans le navigateur. Les principaux fournisseurs de navigateurs Apple (Safari), Google (Chrome), Mozilla (Firefox) et Opera (Opera) sont membres du groupe de travail WebGL.

WebGL est très solide dans sa prise en charge des graphiques accélérés par GPU. Découvrez ces démos de shader GLSL . :-) Et voyez ChemDoodle comme un exemple d'interaction utilisateur.

J'ai travaillé sur une application utilisant le framework O3D de Google , qui gère le graphique de la scène et utilise WebGL pour le rendu (il utilisait auparavant son propre plug-in). O3D est un travail en cours, et sa documentation n'est pas complètement à jour, mais il est en cours de développement actif, et il existe de bonnes démos . 3D Pool peut être le plus dans votre allée. Les développeurs Google sont très réactifs aux questions du groupe de discussion.

Il existe un certain nombre d'autres frameworks basés sur WebGL; voir ici . Ceux qui mentionnent le développement de jeux et les graphiques de scène incluent Copperlicht, SceneJS, X3DOM.

WebGL fonctionne dans les versions de développement récentes de plusieurs navigateurs , mais pas IE. J'utilise Firefox ("Minefield") et Chromium avec de bons résultats. Vous en aurez besoin pour exécuter les démos ci-dessus.

Cependant, si vos exigences sont qu'il ne doit avoir aucune dépendance au-delà de HTML 5 canvas / js, WebGL peut ne pas être le bon choix. Il ne semble pas qu'IE le supporte de sitôt.

Mise à jour: après avoir mis beaucoup de résistance, MS a décidé de prendre en charge WebGL dans IE 11 .

three.js , par mr. doob , est un fantastique moteur 3D pour javascript qui comprend des scénegraph (versions logicielles et WebGL / hardware accélérées), des ombres, des particules, des animations skinnées (je pense) et des effets d'éclairage. Vérifiez-le, c'est un gars super talentueux.

Je dois ajouter que vous aurez besoin du dernier Google Chrome ou d'un équivalent pour voir la plupart des démos, l'un de mes favoris est: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS est une bibliothèque prometteuse qui se vante de créer et d'animer des "couches" individuelles sur la toile pour des performances élevées.

http://www.kineticjs.com/

CAKE.js n'est plus maintenu mais c'est un framework assez puissant - http://code.google.com/p/cakejs/

Démos ici - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Jetez un œil au framework processingjs . De plus, la prochaine version 2.0 de mootools a le projet artistique de travailler avec la toile

Raphael semble être une assez bonne bibliothèque de toiles; il est basé sur SVG (ou basé sur VML dans Internet Explorer), et prend donc en charge de nombreux événements d'entrée utilisateur. C'est assez petit (60kb gzippé), donc ce n'est pas une dépendance trop grande.
Il semble aussi avoir un tweener sympa: http://raphaeljs.com/reference.html#animate (voir ici et ici pour des exemples).

Pour un exemple de ce qu'il peut faire, jetez un œil à cette petite démo intelligente .

J'espère que cela t'aides!

J'ai trouvé deux bibliothèques extrêmement compétitives et bien meilleures que Fabric.

Kinetic.js et easel.js ont tous deux une gestion d'événements, un regroupement et une abstraction générale de forme extrêmement bons. Vous trouverez beaucoup à aimer dans les deux; le chevalet semble avoir plus orienté image et filtré.

Les handlins d'événements de Fabric sont BEAUCOUP pires que l'un ou l'autre - en gros, il traite l'ensemble du canevas comme un grand rrapper d'événements et vous indique quand "Quelque chose" a été cliqué. Il n'attache pas d'événements à des formes individuelles ou à des groupes de formes.

Il existe une bibliothèque intéressante qui vise à améliorer certains des principes de base du travail avec l'API canvas appelée canto.js par David Flanagan, auteur de Javascript: The Definitive Guide .

Aussi, jeune, mais pas mal, le framework Javascript, et lui (animation complexe, gestion des graphiques de scène, gestion des événements et des interactions des utilisateurs) tout à ce sujet - jCanvaScript . Peut-être, sauf «gestion des graphiques de scène».

Travailler avec bHive pour produire des graphiques et des en-têtes de site mobiles, semble impressionnant et puissant, contrairement aux autres, il semble en cours de développement. Adobe Edge vaut également le coup d'œil mais strictement pas Canvas.

http://www.bhivecanvas.com

et

http://labs.adobe.com/technologies/edge/

Aves Engine est vraiment génial: http://www.dextrose.com/en/projects/aves-engine

Aussi, Akihabara semble bon: http://www.kesiev.com/akihabara/

Si vous souhaitez utiliser Javascript, Dojo est une excellente solution. Il dispose d'une API graphique vectorielle compacte et multiplateforme (SVG, VML, Canvas, Silverlight) qui est très puissante. Vous pouvez le trouver dans dojo.gfx et dojox.gfx.

Nous l'avons utilisé pour créer un tuteur de physique interactif qui permet aux étudiants de dessiner des vecteurs, des ellipses, etc. (même ajouter des images) et d'effectuer toutes sortes de transformations sur eux. Vous pouvez voir ce que nous avons fait sur http://gideon.eas.asu.edu/web-UI/login.html - connectez-vous simplement avec n'importe quel nom d'utilisateur.

J'ai jeté un œil à fabric.js et dojox.drawing fait beaucoup des mêmes choses. Si vous regardez les tests dans la boîte à outils (une fois que vous l'avez eu son dojox / dessin / tests /), vous trouverez des exemples de tout, des graphiques vectoriels aux images en passant par les ombres créées par programme.

Je suis impressionné par Akihabara en tant que moteur de jeu. Il a une documentation fantastique sous la forme de didacticiels et d'une API. J'ai même vu sur certains forums de discussion parler d'une version d'Akihabara 2. Malheureusement, tout ce discours a environ un an ou plus. J'espère vraiment que ce moteur est encore en développement.

Je viens de publier la première itération d'une nouvelle bibliothèque de dessin et d'interpolation destinée aux personnes ayant une expérience de développement AS3 / Flash. Bien que ma bibliothèque ne prenne pas encore en charge les chemins de dessin ou les graphiques complexes, j'espère que cela aidera les gens à dessiner et animer rapidement des primitives de base d'une manière familière.

Les commentaires et commentaires sont les bienvenus. http://www.quietless.com/kitchen/introducing-js3/