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 LIGNES DANS LE CANVAS

Dessiner une ligne en JavaScript dans le canvas

Pour dessiner une ligne, nous allons avoir besoin des méthodes moveTo() et lineTo() qui vont définir le point de départ et le dernier point de notre ligne.

Ces deux méthodes vont chacune avoir besoin de deux chiffres représentant respectivement la distance de chaque point par rapport au bord gauche et supérieur du canvas.

Nous allons une nouvelle fois pouvoir gérer la couleur de notre ligne grâce à la propriété strokeStyle.

Finalement, pour tracer la ligne en soi (c’est-à-dire pour réaliser le tracé entre nos deux points), nous allons devoir utiliser la méthode stroke().

Créons immédiatement notre première ligne.

On utilise moveTo(), lineTo() et strke() pour créer une ligne dans notre canvas

Nous avons crée une ligne en JavaScript dans notre canvas

Essayer ce code !

Dessiner plusieurs lignes dans le canvas

On peut également dessiner plusieurs lignes à la suite dans notre canvas.

Pour cela, nous avons deux façons de faire : soit nous définissons une toute nouvelle ligne en utilisant les méthodes moveTo() et lineTo(), soit nous utilisons plusieurs fois d’affilée lineTo().

Dans ce deuxième cas, c’est la méthode lineTo() utilisée juste avant qui va définir le point de départ de notre nouvelle ligne.

Ainsi, on peut créer de véritables figures géométriques en calculant bien les nombres donnés à lineTo().

On utilise plusieurs fois lineTo()

On peut créer plusieurs lignes avec un point commun en JavaScript en utilisant plusieurs fois lineTo()

Essayer ce code !

Epaisseur et couleur des lignes

Notez que si vous voulez différencier vos lignes les unes des autres, en attribuant à chacune une couleur ou une épaisseur différente par exemple, vous devrez avant tout utiliser la méthode beginPath() qui va définir le début d’un nouveau tracé.

Ensuite, nous allons pouvoir définir l’épaisseur de nos lignes avec la propriété lineWidth.

On trace plusieurs lignes de couleur et d’épaisseur différentes dans le canvas

Nos lignes sont totalement différentes grâce à la méthode JavaScript beginPath()

Essayer ce code !

Chapitre précédent

Chapitre suivant