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

PRESENTATION DE L’ELEMENT HTML CANVAS

Découverte de l’élément HTML canvas

L’élément HTML canvas va nous permettre de dessiner (et notamment de créer des figures géométriques) dans une page web, au sein d’un « canvas ».

Pour être plus précis, l’élément canvas ne va servir que de conteneur pour les graphiques. Les graphiques en soi devront être créés à l’aide d’un langage de script, et c’est là que le JavaScript entre en jeu.

Nous allons construire nos graphiques grâce aux méthodes et aux propriétés de l’objet JavaScript Canvas.

L’élément canvas va être représenté par une zone rectangulaire dans une page HTML. Cet élément n’a ni bordure, ni contenu par défaut.

Utilisation de canvas

Commençons immédiatement à pratiquer en créant un premier canvas grâce à l’élément canvas.

Attention, vous devez absolument préciser la largeur (width) et une hauteur (height) pour votre canvas en tant qu’attributs, au sein de la balise ouvrante de canvas et sans utiliser d’unité.

La théorie ici est assez complexe mais pour faire simple, l’élément canvas va lui même convertir les chiffres que vous allez lui donner en équivalent pixels.

Si vous précisez la largeur et la hauteur de l’élément d’une autre manière, les dessins que nous allons faire à l’intérieur de notre canvas par la suite risquent de ne pas avoir la taille voulue (car l'élément canvas va changer leur échelle).

Afin de bien visualiser la zone occupée par notre canvas, nous allons également le colorer en rouge.

Création de notre premier canvas en HTML

Notre élément canvas s’affiche bien

Essayer ce code !

Par défaut, notre canvas va se placer contre le bord supérieur gauche de son élément parent (ici, l'élément body de notre page web).

Comme certains navigateurs récents créent automatiquement une petite marge et/ou un léger padding, nous allons appliquer un reset CSS sur le body afin de tous travailler avec la même base.

Cela devrait totalement coller votre canvas contre le bord supérieur gauche de votre page web si cela n’était pas le cas précédemment.

On applique un reset CSS des marges et du padding du body en CSS

Notre élément canvas est situé en haut à gauche de notre page web

Essayer ce code !

Dessiner dans le canvas : la théorie

Pour pouvoir dessiner dans notre canvas en JavaScript, nous allons devoir suivre trois étapes :

  1. Accéder à l’élément canvas en JavaScript ;
  2. Extraire le « contexte » du canvas grâce à la méthode getContext() ;
  3. Utiliser les propriétés adaptées pour dessiner la figure désirée dans notre canvas.

Tout d’abord, on va donc devoir accéder à notre élément canvas en JavaScript. Pour cela, on va comme à notre habitude utiliser le DOM HTML.

Ensuite, il va falloir extraire le contexte du canvas avec la méthode getContext() qui est une méthode de l’objet Canvas.

Au jour d’aujourd’hui, nous n’avons qu’un contexte disponible : la deux dimensions (2d). Dans le futur, il est possible que les navigateurs supportent également la 3d.

Finalement, nous allons dessiner dans notre canvas grâce aux différentes méthodes et propriétés qui nous sont disponibles.

L’élément canvas va nous permettre de créer des rectangles, lignes, arcs de cercle, dégradés, etc.

Nous allons également pouvoir incliner nos dessins, écrire du texte ou insérer une image ou un autre dessin au sein de notre élément canvas.

Chapitre précédent

Chapitre suivant