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

CREER DES DEGRADES DANS LE CANVAS

La création de dégradés

L'élément canvas va accepter des dégradés linéaires (le dégradé va se faire selon un axe) ou de type radial (le dégradé va se faire dans toutes les directions, à partir d’un point central).

Si vous ne maitrisez pas bien les concepts de dégradés linéaires et radiaux, je vous invite à consulter la partie du cours HTML et CSS qui leur est dédiée.

Pour créer des dégradés dans le canvas, on va procéder en trois étapes :

  1. On définit le comportement et le type de dégradé ;
  2. On définit le nombre et l’emplacement des transitions de couleurs avec les couleurs à proprement parler ;
  3. On utilise le dégradé créé pour remplir une forme géométrique.

Créer un dégradé linéaire dans le canvas

Pour créer un dégradé linéaire, nous allons utiliser la méthode createLinearGradient(). Nous allons passer quatre arguments à cette méthode :

  1. Un nombre indiquant l’emplacement du début du dégradé par rapport au bord gauche du canvas ;
  2. Un nombre indiquant l’emplacement du début du dégradé par rapport au bord supérieur du canvas ;
  3. Un nombre indiquant l’emplacement de la fin du dégradé par rapport au bord gauche du canvas ;
  4. Un nombre indiquant l’emplacement de la fin du dégradé par rapport au bord supérieur du canvas.

Pour définir et effectuer les transitions de couleur au sein de notre dégradé, nous allons devoir utiliser la méthode addColorStop().

Cette méthode va nous permettre de définir ce qu’on appelle des « couleurs stop », c’est-à-dire des transitions de couleurs.

La méthode addColorStop() va prendre deux arguments : la position où démarre la couleur stop (entre 0 et 1) et la couleur.

On crée un dégradé linéaire dans notre canvas

Notre dégradé remplit bien notre forme géométrique

Essayer ce code !

Ici, nous avons rempli un rectangle avec notre dégradé.

Attention à bien tenir compte des différentes positions de vos dégradé et forme géométrique lorsque vous remplissez une forme géométrique avec un dégradé.

En effet, si la position et la taille de la forme géométrique ne correspondent pas exactement au dégradé, soit nous ne verrons qu’une portion de dégradé, soit il n’aura pas l’aspect voulu.

Attention à faire correspondre l’emplacement de la forme géométrique et du dégradé

Si on remplit une forme géométrique avec un dégradé crée à un autre emplacement, celui ci ne s’affichera pas bien

Essayer ce code !

Créer un dégradé radial dans le canvas

Pour créer un dégradé radial, on va cette fois ci utiliser la méthode createRadialGradient().

Cette méthode va avoir besoin de six arguments :

  1. Un nombre indiquant l’emplacement du point central de départ du dégradé par rapport au bord gauche du canvas ;
  2. Un nombre indiquant l’emplacement du point central de départ du dégradé par rapport au bord supérieur du canvas ;
  3. Le rayon (et donc la taille) du point central de départ du dégradé ;
  4. Un nombre indiquant l’emplacement du point central de fin du dégradé par rapport au bord gauche du canvas ;
  5. Un nombre indiquant l’emplacement du point central de fin du dégradé par rapport au bord supérieur du canvas ;
  6. Le rayon (et donc la taille) du point central de fin du dégradé.

Remarquez qu’on va définir deux points pour nos dégradés radiaux : un point de départ et un point de fin.

Ces « points » vont en fait plutôt correspondre à des disques à proprement parler, avec le disque de fin plus grand que celui de départ.

Jouer sur la taille de ces deux points ou disques va nous permettre d’obtenir des transitions et donc des dégradés plus ou moins francs.

Création d’un dégradé radial dans notr canvas

On a créé un dégradé radial en JavaScript qu’on à place dans un cercle créé avec le canvas

Essayer ce code !

Là encore, faites bien attention aux différentes taille et position de votre dégradé et de votre forme géométrique pour obtenir le résultat souhaité.

Chapitre précédent

Chapitre suivant