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.

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.

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.

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