Formation Animations en HTML5 avec Canvas

Introduction et rappels

Les frameworks HTML5 : quels outils et quels avantages ?
Retours sur les bases d’une application Web
Les APIs disponibles
Rappels sur le langage de script
La différence entre canvas et SVG

Les bases du dessin avec l’API Canvas

La balise canvas et son API
Remplir la zone du canvas
Créer des formes primitives
Ajouter et personnaliser du texte
Animer les éléments
Utiliser les techniques de tracés avancées : Béziers, courbes…
Dessiner une texture

Techniques de dessin avancées

Transformer les objets avec Translate
Gérer le mouvement des formes : scaling, rotation…
Appliquer une transformation customisée
Gérer les ombres et les dégradés
Détourer un élément
Utiliser des masques
Optimiser le canvas
Utiliser la propriété globalAlpha
Manipulation de pixels

Exemples de mise en application

Construire un diaporama d’images
Créer des animations, utiliser des spritesheets
Utiliser le double buffering
Intégrer le canvas dans des pages

Concevoir avec des frameworks

Exemple : utiliser KineticJS
Organiser les ressources
Gérer les événements
Gérer les interactions : interpolation, drag & drop, animation

Aperçu des applications 3D de canvas

Support 3D du JavaScript
Les notions de base
Gérer les caméras et l’éclairage
Animer les objets
Gérer les textures