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

DESSINER DES RECTANGLES AVEC CANVAS EN JAVASCRIPT

Dessiner un rectangle plein

Pour dessiner un rectangle dans notre élément canvas, nous allons d’abord devoir accéder à notre élément en JavaScript puis récupérer son contexte avec la méthode getContext().

Ensuite, pour créer notre rectangle à proprement parler, nous allons utiliser la propriété fillStyle et la méthode fillRect().

Attention, afin que cela fonctionne correctement vous devrez toujours placer la propriété fillStyle avant la méthode fillRect() dans votre code, ou plus exactement il faudra toujours que la propriété soit exécutée avant la fonction.

La propriété fillStyle va nous permettre d’indiquer une couleur de remplissage pour notre rectangle. Pour la couleur, on peut opter soit pour un nom de couleur, soit pour une valeur hexadécimale ou même encore pour une notation RGB ou RGBa.

La méthode fillRect() va elle définir la taille et la position de notre rectangle. On va passer quatre arguments à cette méthode : les deux premiers correspondent respectivement au retrait de notre rectangle par rapport aux bords gauche et supérieur de notre canvas tandis que les deux autres servent à indiquer la largeur et la hauteur de notre rectangle (toujours sans préciser d’unité).

Création d’un rectangle au sein de canvas en JavaScript

On crée notre premier rectangle plein dans le canvas

Essayer ce code !

Attention à ne pas dépasser !

Faites bien attention à bien calculer la taille de votre rectangle : en effet, le retrait plus la taille du rectangle ne devrait jamais dépasser la taille totale du canvas.

Si jamais c’était le cas, votre rectangle serait tout simplement tronqué.

Le rectangle dessiné est plus gros que le canvas

Le rectangle dépasse du canvas, celui ci est donc tronqué

Essayer ce code !

Dessiner un rectangle vide dans le canvas

Pour dessiner un rectangle vide dans l’élément canvas, nous allons utiliser la propriété strokeStyle et la méthode strokeRect().

Ces propriété et méthode s’utilisent exactement de la même manière que fillStyle et fillRect(), à la différence que cette fois-ci strokeStyle va définir la couleur de la bordure du rectangle.

Pour définir la taille de la bordure, nous allons utiliser la propriété lineWidth, qui va prendre en valeur un nombre déterminant l’épaisseur de notre bordure.

Utilisation de lineWidth et strokeRect() en JavaScript

On crée un rectangle vide dans notre canvas

Essayer ce code !

Dessiner plusieurs rectangles dans le canvas

On va pouvoir également dessiner plusieurs rectangles à l’intérieur de notre canvas et les superposer.

Notez que le premier rectangle créé sera « en dessous » du deuxième, qui sera lui même sous le troisième, etc.

Création de plusieurs rectangles dans notre canvas

On peut dessiner et superposer plusieurs rectangles dans notre canvas en JavaScript

Essayer ce code !

Une nouvelle fois, retenez bien que les propriétés fillStyle et strokeStyle supportent tout à fait les notations RGBa, et gèrent donc la transparence.

Chapitre précédent

Chapitre suivant