Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

INCLINER UN DESSIN DANS LE CANVAS

La méthode rotate()

On va pouvoir incliner un plus exactement appliquer une rotation à un dessin au sein de notre canvas avec la méthode rotate().

Cette méthode va prendre en argument la valeur de l’angle de rotation souhaité en radians. La rotation va se faire dans le sens des aiguilles d’une montre.

Attention : notez bien que la méthode rotate() ne va affecter que les dessins créés après que la rotation soit faite.

En d’autres termes, la méthode rotate() doit être exécutée avant que le dessin ne soit créé afin qu’elle soit effective.

Voyons immédiatement un premier exemple d’utilisation de cette méthode.

Utilisation de la méthode rotate() pour incliner un dessin dans le cadnas

Nos dessins ont bien été inclinés grâce à rotate()

Essayer ce code !

Il y a deux choses à noter par rapport à l’exemple ci-dessus : tout d’abord, on observe que les rotations se font par défaut à partir du coin supérieur gauche de l'élément canvas, qui est le point de référence par défaut. Pour incliner nos dessins à partir d’un autre point, nous allons devoir utiliser la méthode translate() pour définir un nouveau point de référence.

Ensuite, faites bien attention si vous effectuez plusieurs rotations d’affilée : dans l’exemple ci-dessus, la première utilisation de rotate() s’applique également au carré rose, ce qui est finalement logique.

La méthode translate()

Pour incliner nos dessins à partir d’un autre point que le coin supérieur gauche de l'élément canvas, nous allons utiliser la méthode translate().

Cette méthode va avoir pour effet de bouger virtuellement d’un certain nombre de pixel le point de départ de nos dessins (situé en (0,0) par défaut) et donc de nous offrir un nouveau point de référence pour nos dessins.

Attention : encore une fois, seuls les figures dessinées après avoir utilisées cette méthode seront impactées par tranlate().

Nous allons passer à la méthode translate() un couple d’arguments correspondant aux coordonnées (distance par rapport aux bords gauche et supérieur du canvas) de notre nouveau point de référence.

Utilisation de translate() dans un cas simple en JavaScript

Avec translate(), on modifie le point de départ de nos dessins dans le canvas

Essayer ce code !

En définissant le point de départ de nos dessins au centre de l'élément canvas, par exemple, nous allons pouvoir créer des rotations intéressantes.

On utilise tranlate() pour définir le nouveau point de départ au centre du canvas

Nos rotations s’effectuent à partir du centre du canvas

Essayer ce code !

Ici, nos rotations s’effectuent à partir du centre du canvas.

Chapitre précédent

Chapitre suivant