Quel est l'état actuel de la technique dans les bibliothèques et cadres JavaScript de canevas HTML?
J'étudie actuellement les 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 cadres JavaScript du canevas HTML?
En particulier, existe-t-il des cadres qui prennent en charge le type d'éléments nécessaires au développement de jeux - animation complexe, gestion des graphiques de scène, gestion des événements et des interactions avec les utilisateurs?
Désireux également de considérer les produits commerciaux et open source.
J'ai travaillé sur fabric.js - une bibliothèque de canevas pour aider exactement cela - manipuler des objets sur canevas, en gérant les événements et les interactions des utilisateurs. Ce n'est pas encore sorti, mais jetez un oeil à un simple démo d'aperç .
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 MIT License )
Pour commencer, consultez:
- Démos (simple et complexe, avec du code pour montrer comment c'est fait)
- Présentation Fabric.js sur FalsyValues (et ne autre sur BK.js )
- Wiki sur github (y compris FAQ )
- Documentation
- Google Group (posez-y des questions)
- Fabric.js sur Twitter (ou de 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 construits dessus. Je le considérerais en haut de la liste pour l'état de l'art pour les graphiques accélérés par GPU 3D et l'animation complexe 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'interface de modèle d'objet de document. ...
WebGL apporte une 3D sans plug-in au 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 GLSL shaderdemos . :-) 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 son propre plug-in). O3D est un travail en cours, et sa documentation n'est pas complètement à jour, mais elle est en développement actif, et il y en a bonnes démos là-bas . D Pool peut être le plus à votre hauteur. Les développeurs de Google sont très réactifs aux questions du groupe de discussion.
Il existe un certain nombre d'autres cadres 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 pas avoir de dépendances au-delà de HTML 5 canvas/js, WebGL n'est peut-être pas le bon choix. Il ne ressemble pas à IE le supportera 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 scenegraph (versions logicielles et WebGL/accélérées matériellement), ombrage, particules, animation skinnée (je pense) et effets d'éclairage. Regardez-le, c'est un gars super talentueux.
Je dois ajouter que vous allez avoir besoin du dernier Google Chrome ou é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 montante qui se vante de créer et d'animer des "calques" individuels sur la toile pour de hautes performances.
CAKE.js n'est plus maintenu mais 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 des mootools a le art projekt pour travailler avec canvas
Raphael semble une assez bonne bibliothèque de canevas; 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 (60 ko gzippé), donc ce n'est pas une trop grande dépendance.
Il semble également avoir un tweener Nice: http://raphaeljs.com/reference.html#animate (voir ici et ici pour des exemples).
Pour un exemple de ce qu'il peut faire, regardez cette petite démo intelligente .
J'espère que cela t'aides!
J'ai trouvé que deux bibliothèques étaient extrêmement compétitives et bien meilleures que le tissu.
Kinetic.js et easel.js ont tous deux une très bonne gestion des événements, un regroupement et une abstraction de forme générale. Vous trouverez beaucoup à aimer dans les deux; chevalet semble avoir plus orienté image et filtrage.
Les handlins d'événement de Fabric sont BEAUCOUP pires que l'un ou l'autre - fondamentalement, ils traitent l'ensemble du canevas comme un grand rrapper d'événement et vous indiquent 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 de l'utilisation de l'API Canvas appelée canto.js par David Flanagan, auteur de Javascript: The Guide définitif .
Aussi, jeune, mais pas mal, framework Javascript, et tout cela (animation complexe, gestion des graphiques de scène, gestion des événements et des interactions avec les utilisateurs) - jCanvaScript . Peut-être, sauf "gestion des graphes de scènes".
Travailler avec bHive pour produire des graphiques et des en-têtes de sites mobiles, semble impressionnant et puissant, contrairement aux autres semble être en cours de développement. Adobe Edge vaut également le détour, mais strictement pas Canvas.
et
Si vous souhaitez utiliser Javascript, Dojo est une excellente façon de procéder. 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 élèves de dessiner des vecteurs, des ellipses, etc. (même d'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 --juste vous connecter avec n'importe quel nom d'utilisateur.
J'ai jeté un coup d'œil à fabric.js et dojox.drawing fait beaucoup les mêmes choses. Si vous regardez les tests dans la boîte à outils (une fois que vous avez son dojox/dessin/tests /), vous trouverez des exemples de tout, des graphiques vectoriels aux images aux ombres créées par programme.
Aves Engine est vraiment vraiment génial: http://www.dextrose.com/en/projects/aves-engine
En outre, Akihabara semble bon: http://www.kesiev.com/akihabara/
Je suis impressionné par Akihabara comme moteur de jeu. Il a une documentation fantastique sous forme de tutoriels et d'une api. J'ai même vu sur certains babillards électroniques parler d'une version 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 formation en 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 de manière familière.
Vos commentaires et commentaires sont les bienvenus. http://www.quietless.com/kitchen/introducing-js3/