strokeStyle et fillStyle.
Comme on l’a dit précédemment, on va également pouvoir passer des dégradés ou des motifs à ces propriétés. Pour faire cela, nous allons utiliser des objets appartenant aux interfaces CanvasGradient et CanvasPattern.
On va pouvoir créer deux sortes de dégradés : des dégradés linéaires (le dégradé se fait selon un axe ou une direction) ou radiaux (le dégradé se fait à partir d’un point central et dans toutes les directions).
On va pouvoir utiliser des images ou des captures d’images de vidéos comme motifs.
Créer un dégradé linéaire dans un canevas
Pour définir un dégradé linéaire, on va devoir commencer par utiliser la méthode createLinearGradient() de l’interface CanvasRenderingContext2D.
Cette méthode prend 4 arguments et retourne un objet CanvasGradient. Ces arguments vont correspondre à l’emplacement du dégradé dans le canevas et vont nous servir à indiquer sa direction. Ils correspondent à :
- L’écart entre le point de départ du dégradé et le bord gauche du canevas ;
- L’écart entre le point de départ du dégradé et le bord supérieur du canevas ;
- L’écart entre le point de fin du dégradé et le bord gauche du canevas ;
- L’écart entre le point de fin du dégradé et le bord supérieur du canevas .
On va pouvoir choisir n’importe quelles coordonnées pour le point de départ et d’arrivée du dégradé, ce qui va nous permettre de créer des dégradés linéaires dans n’importe quelle direction.
Attention : les coordonnées du dégradé ne dépendent pas de la forme à laquelle il va être appliqué mais sont relatives au canevas en soi.
Ensuite, on va pouvoir utiliser notre objet CanvasGradient pour utiliser la méthode addColorStop() de cette même interface.
La méthode addColorStop() va nous permettre d’ajouter des « couleurs stop », c’est-à-dire des points d’arrêt ou encore des transitions de couleurs dans notre dégradé.
Cette méthode va nous permettre d’indiquer qu’à un certain point du dégradé celui-ci doit arriver à une certaine couleur. Elle prend deux arguments : un décalage et un couleur. Le décalage correspond au niveau du dégradé auquel le dégradé doit arriver à la couleur fournie en second argument.
Ce décalage doit être compris entre 0 et 1. Vous pouvez considérer ce décalage comme un pourcentage de la taille totale du dégradé. La valeur 0.5 serait donc l’équivalent de 50%.
Une fois les couleurs stop définies, nous n’avons plus qu’à passer notre objet CanvasGradient en valeur de la propriété fillStyle ou strokeStyle.
Voyons immédiatement comment cela fonctionne en pratique en créant des dégradés pour différentes formes dans notre élément canvas :
See the Pen
Cours JavaScript 15.4.1 by Pierre (@pierregiraud)
on CodePen.
Ici, on crée un rectangle et un triangle et on leur applique un dégradé à chacun. On crée les dégradés en eux-mêmes et on définit leur emplacement dans le canevas grâce à createLinearGradient(). Notre premier dégradé va se faire de gauche à droite tandis que notre deuxième dégradé va se faire d’en haut à gauche vers la droite et vers le bas.
Ensuite, on définit les couleurs de nos dégradés et les points de transition entre chaque couleur grâce à la méthode addColorStop(). Notez qu’on peut l’appeler autant de fois qu’on le souhaite et donc définir autant de couleurs et de transitions qu’on le souhaite dans notre dégradé.
Enfin, on passe notre dégradé en valeur à fillStyle ou strokeStyle et on crée finalement nos formes géométriques.
Faites attention une nouvelle fois à bien tenir compte des différentes positions des dégradés et formes géométriques lorsque vous remplissez une forme géométrique avec un dégradé.
En effet, si la position ou la taille du dégradé sont différentes de celles de la figure à laquelle on souhaite l’appliquer, le dégradé pourra apparaitre comme étant rogné ou trop court. Regardez plutôt l’exemple ci-dessous avec deux rectangles pleins :
See the Pen
Cours JavaScript 15.4.2 by Pierre (@pierregiraud)
on CodePen.
Ici, le point de départ des dégradés et des formes géométriques qu’ils doivent remplir coïncident bien. Cependant, nos deux dégradés vont occuper un emplacement soit plus petit soit plus grand que leurs formes géométriques.
Dans le cas où le dégradé est moins large que la forme, le reste de la forme sera rempli avec les couleurs du dégradé (en fonction de sa direction et de son emplacement). Dans le cas contraire, le dégradé sera rogné.
Créer un dégradé radial dans un canevas
Un dégradé radial est un dégradé qui part d’un point central et se propage dans toutes les directions à partir de celui-ci et selon une ellipse. Pour créer un dégradé radial dans un canevas, on va cette fois-ci utiliser la méthode createRadialGradient().
Cette méthode va retourner un objet CanvasGradient. On va devoir lui passer 6 arguments :
- L’écart entre le point (ou plus exactement le cercle) de départ du dégradé et le bord gauche du canevas ;
- L’écart entre le point (cercle) de départ du dégradé et le bord supérieur du canevas ;
- Le rayon du point (cercle) de départ du dégradé ;
- L’écart entre le cercle de fin du dégradé et le bord gauche du canevas ;
- L’écart entre le cercle de fin du dégradé et le bord supérieur du canevas ;
- Le rayon du cercle de fin du dégradé.
Ensuite, les opérations et les règles vont être les mêmes pour le remplissage d’une forme dans un canevas avec un dégradé radial ou avec un dégradé linéaire.
Attention ici : si vous souhaitez remplir totalement une forme qui n’a pas une forme d’ellipse avec un dégradé radial en conservant l’effet de dégradé, il faudra que le dégradé soit plus grand (« dépasse ») de la forme en question par endroit.
See the Pen
Cours JavaScript 15.4.3 by Pierre (@pierregiraud)
on CodePen.
Création d’un motif dans le canevas
Finalement, on va encore pouvoir fournir un motif en valeur de fillStyle ou de strokeStyle.
Pour faire cela, on va déjà devoir utiliser la méthode createPattern(). Cette méthode va prendre en arguments un objet image ainsi qu’un motif de répétition.
Dans la majorité des cas, le motif utilisé sera soit une image classique soit un SVG (graphique vectoriel).
Pour obtenir un objet image « classique » (non SVG), on peut soit utiliser le constructeur Image() avec la syntaxe new Image() qui crée une instance HTMLImageElement, soit utiliser document.createElement('img').
On pourra ensuite utiliser la propriété src de cet objet afin de préciser l’emplacement de notre image.
Les valeurs possibles pour le motif de répétition de l’image sont les suivantes :
repeat: image répétée horizontalement et verticalement ;repeat-x: image répétée horizontalement uniquement ;repeat-y: image répétée verticalement uniquement ;no-repeat: l’image n’est pas répétée.
Utilisons immédiatement la méthode createPattern() pour fournir un motif de remplissage à un rectangle dans notre canevas. Ici, j’utilise une image qui est située dans le même dossier que mon fichier.
See the Pen
Cours JavaScript 15.4.4 by Pierre (@pierregiraud)
on CodePen.
