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 :
Pour créer un dégradé linéaire, nous allons utiliser la méthode createLinearGradient()
. Nous allons passer quatre arguments à cette méthode :
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.
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.
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 :
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.
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é.