• A la une
  • Catégories
  • Dossiers
  • +

6 ressources et frameworks pour travailler avec HTML5 Canvas

par Benjamin SANCHEZle 15/06/2017

Besoin de travailler avec Canvas, mais sans savoir par où démarrer ? Aujourd'hui le BlogDuWebdesign vous propose de découvrir une liste de ressources et Frameworks pour vous simplifier le travail.

CanvasQuery

Si vous ne connaissez pas Canvas et que vous cherchez par où commencer, c'est votre jour de chance ! Pas la peine de lire la suite de l'article, portez votre choix sur canvasQuery.

La particularité de CanvasQuery est qu'il est très proche de la syntaxe normale de canvas, et est même totalement compatible avec cette dernière. Tout ce qu'il apporte est plus de souplesse et de praticité a travailler avec Canvas, ainsi qu'une documentation claire, bien que malheureusement assez peu complète. Pas de gestion du clavier, de la souris, ou autre, juste le necessaire.

Fabric.js

Fabric js est une library Canvas un peu spéciale, dans le sens ou son objectif final semble être l'interactivité avec l'utilisateur, presque comme s'il s'agissait d'un WYSIWYG graphique.

Allez voir l'exemple sur la page principale de la documentation, un exemple est souvent bien mieux que tous les discours.

Stage.js

Stage.js est une library pour laquelle j'ai des sentiments assez ambivalents. Très séduisante de prime abord pour sa gestion de l'affichage et des transformations (les rotations principalement, les vrais savent à quels points ces dernières sont la purge intersidéral en canvas), son API sous la forme d'une classe Singleton met vraiment mes nerfs à rude épreuve.
De plus, si vous espériez une documentation en bonne et due forme, vous pouvez tout de suite oublier, ici toute information se trouvera au forceps en lisant des exemples ou directement le code source.

Néanmoins, après un petit peu de travail de wrapping, il est vraiment possible de faire quelque chose avec une API plutôt agréable je trouve. Si le sujet vous intéresse, quelques articles vont suivre !

Easel.js

Easel js est une très bonne library canvas, sur laquelle je n'aurais malheureusement pas grand-chose à dire. Propre, bien documentée, maintenue, puissante et surtout dépourvue de défauts particulièrement frustrants (c'est toi que je regarde Stage), et pour un projet pro, c'est sans doute elle (ou canvasQuery) que je choisirais.

Pourtant le coeur à ses raisons que la raison ignore, je n'arrive pas à l'apprécier, je lui prefere Stage pour mes projets perso.

Three.js

Three js est un peu bas dans cette liste, situation assez dommage pour ce qui est ni plus ni moins que le boss du game en matière de 3D Web. Efficace, puissant, rapide, il n'a que des avantages... paraît-il.

Je ne l'ai personnellement pas touché (la 2D m'enchante plus, que voulez-vous) donc je n'ai pas d'avis de première main à donner dessus.

Isomer

Attention, cette library semble abandonnée. Elle n'a pas eu la moindre mise à jour depuis près de deux ans, et son auteur ne semble pas chercher de mainteneur. Utilisez la donc à vos risques et perils.

Isomer est une library canvas faite pour travailler la 3D isométrique. Simple d'accès et permettant des rendus très agréables a l'oeil, c'est un outil qui remplit parfaitement un rôle pour lequel nous n'avons pas forcément de besoin. Dommage tout de même qu'elle ait été abandonnée, car personne ne semble avoir repris le flambeau.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir