Nos cours et exercices

Ce TP vous introduit à Canvas HTML5 et aux bases de la programmation graphique en JavaScript. Vous apprendrez à dessiner des formes simples, manipuler les couleurs et comprendre le système de coordonnées.

• Créer un canevas HTML5 et le configurer
• Dessiner des formes géométriques de base (cercles, rectangles, lignes)
• Manipuler les couleurs, les dégradés et les styles de lignes
• Implémenter une animation simple avec requestAnimationFrame

Cet exercice approfondit l'utilisation de Canvas pour créer un petit éditeur de courbes interactif. Vous apprendrez à gérer les points de contrôle et à implémenter différents types de courbes.

• Créer un système de points de contrôle interactifs
• Implémenter une courbe de Bézier à partir des points
• Ajouter la fonctionnalité d'ajout/suppression de points
• Développer un système de sélection et de manipulation des points
• Gérer l'historique (annuler/refaire des actions)

Ce TP se concentre sur les principes de design et de mise en page pour créer des interfaces utilisateur intuitives et esthétiques à l'aide de HTML et CSS modernes.

• Utiliser CSS Grid et Flexbox pour des mises en page complexes
• Créer des designs réactifs avec les requêtes média
• Implémenter des animations et transitions CSS subtiles
• Appliquer les principes de design UX pour améliorer l'utilisabilité

Ce TP vous permet d'approfondir la gestion des événements en JavaScript pour créer des interfaces réactives et interactives. Vous apprendrez à capturer et traiter différents types d'événements utilisateur.

• Comprendre le modèle d'événements du DOM
• Implémenter des gestionnaires d'événements pour diverses interactions
• Maîtriser la propagation des événements (bubbling et capturing)
• Créer des interfaces réactives avec feedback utilisateur
• Optimiser la performance des gestionnaires d'événements

Dans ce TP pratique, vous développerez un outil de tracé interactif avec Canvas. Vous apprendrez à implémenter des fonctionnalités avancées comme le dessin en temps réel et les transformations graphiques.

• Créer un système de tracé avec interaction à la souris
• Implémenter différents outils de dessin (ligne, rectangle, ellipse)
• Ajouter des options de style (couleur, épaisseur, style de ligne)
• Gérer un système d'annulation/rétablissement d'actions
• Implémenter l'export et le chargement de dessins

Voici la correction détaillée du TP 1 sur Canvas. Vous trouverez ici les solutions et explications pour chaque partie de l'exercice.

Solution complète pour l'éditeur de courbes avec gestion des points de contrôle et des courbes de Bézier.

Solution pour la mise en page responsive utilisant CSS Grid et Flexbox.

Solution pour la gestion des événements JavaScript avec gestionnaire d'état et historique.

Solution complète pour l'outil de tracé avec gestion des outils et export.