Apprendre HTML Canvas

Par Jonathan.B Catégories : FRONT-END
Liste de souhaits Partager
Partager le cours
Lien de la page
Partager sur les réseaux sociaux

À propos du cours

La formation complète sur HTML Canvas, allant du niveau débutant au niveau avancé, est conçue pour vous transformer en un développeur compétent dans l’utilisation de l’élément Canvas pour créer des graphiques et des animations interactives sur le web. Nous vous guiderons à travers chaque étape du processus, de la découverte des bases fondamentales jusqu’à la maîtrise des concepts avancés.

Tout d’abord, nous vous introduirons à l’élément Canvas dans le contexte du HTML. Vous apprendrez à créer un canevas, à définir sa taille, et à le positionner sur votre page web. Vous découvrirez également comment dessiner des formes de base telles que des lignes, des rectangles et des cercles. Pour une vue détaillée sur les éléments Canvas, consultez la documentation MDN sur Canvas.

Ensuite, nous explorerons les fonctionnalités avancées de l’élément Canvas. Vous apprendrez à manipuler les pixels du canevas, à créer des dégradés et à utiliser des images pour concevoir des graphiques plus complexes. Pour comprendre comment travailler avec les images sur Canvas, visitez MDN sur les images dans Canvas.

Nous aborderons également l’animation sur le Canvas en utilisant JavaScript. Vous apprendrez à créer des animations fluides en mettant à jour les propriétés du canevas à intervalles réguliers. Pour approfondir vos connaissances sur l’animation avec Canvas, consultez MDN sur l’animation avec Canvas.

Au fur et à mesure que vous progresserez, nous vous introduirons aux techniques avancées telles que la manipulation d’image, les transformations 2D et 3D, ainsi que la création de jeux simples en utilisant le Canvas. Pour des exemples de jeux créés avec Canvas, explorez des tutoriels sur les jeux avec Canvas.

Enfin, nous mettrons l’accent sur l’optimisation de la performance du Canvas et sur les bonnes pratiques pour garantir une expérience utilisateur fluide. Pour des conseils sur l’optimisation des performances Canvas, référez-vous à MDN sur les performances Canvas.

Afficher plus

Qu’allez-vous apprendre ?

  • Introduction à l'élément
  • Dessiner des Formes de Base
  • Styles et Remplissage
  • Texte sur Canvas
  • Animations
  • Manipulation d'Images
  • Interactions Utilisateur
  • Création de Graphiques Dynamiques
  • Optimisation des Performances
  • Projets Pratiques et Application

Contenu du cours

HTML Canvas

  • Préparation à la formation
    02:42
  • Déclarer un Canvas
    04:39
  • Rectangle
    04:58
  • Les dégradés
    06:13
  • DrawImage
    03:55
  • Dessin de trajets
    04:52
  • Dessin de lignes
    03:49
  • Cercle
    02:43
  • Texte
    02:39
  • SetAtribute
    02:11
  • Canvas responsif
    06:06
  • Save et restore
    04:10
  • Translate
    03:49
  • Rotate
    03:05
  • Request animationframe
    04:59
  • Effets de souris
    04:47
  • Fichiers sources
    00:00

Projets pratiques

Notes et avis de l’apprenant

Encore aucun avis !
Encore aucun avis !

Want to receive push notifications for all major on-site activities?

Newsletter

Newsletter

Restez à jour avec les derniers tutoriels, astuces et offres exclusives sur les langages et outils du web. Recevez un seul email par mois, sans spam, juste du contenu de qualité pour booster vos compétences. Inscrivez-vous maintenant.

 

1 abonnement = 1 formation offerte

 

Confirmez votre inscription via l'email qui vient de vous être envoyé. Vérifiez vos spams.