Dégradés linéaires dans CANVAS

Le canevas

Le canevas comprend deux parties. La partie de gauche est remplie avec un dégradé linéaire bicolore et la partie de droite est remplie avec un dégradé linéaire tricolore.

Le code de la page

... <canvas width ="900" height ="450" style ="width : 80% ; height :auto;"></canvas> ... <script> var canevas = document.querySelector("canvas"); var contexte = canevas.getContext('2d'); var X = canevas.width; var Y = canevas.height ; //définition du premier degradé var degrade1 = contexte.createLinearGradient(0,0,X/2,Y); // axe : diagonale descendante degrade1.addColorStop(0,"green"); degrade1.addColorStop(1,"white"); // remplissage du carré de gauche avec ce dégradé contexte.fillStyle = degrade1; contexte.fillRect(0,0,X/2,Y); // définition du deuxième dégradé linéaire var degrade2 = contexte.createLinearGradient(X/2,Y,X,0); // axe : diagonale montante degrade2.addColorStop(0,"purple"); degrade2.addColorStop(0.5,"pink"); degrade2.addColorStop(1,"white"); // remplissage du carré de droite contexte.fillStyle = degrade2; contexte.fillRect(X/2,0,X/2,Y); ...

HTML & CSS

La largeur d'affichage du canevas toujours égale à 80% de celle du conteneur. Mais pour le script les dimensions du canevas seront : 900 par 450 (valeurs des attributs width / height de la balise CANVAS).

Le script

On rencontre une nouvelle méthode !
var degrade1 =contexte.createLinearGradient(0,0,X/2,Y): la méthode createLinearGradient(x1,y1,x2,y2) détermine l'axe du dégradé linéaire. Ici il s'agit d'une diagonale descendante puisque Les coordonnées du point de départ sont 0,0 et les coordonnées du point d'arrivée sont X/2,Y.
degrade1.addColorStop(0,"green"); degrade.addColorStop(1,"white");: ces deux instructions précisent que le dégradé commence par vert et se termine par blanc. Il y peut y avoir des points de couleur intermédiaires ; le premier paramètre de la méthode addColor doit alors être un réel compris entre 0 et 1.

contexte.fillStyle = degrade1: La "couleur" de remplissage est égale à la variable degrade1 dans laquelle le premier degradé a été défini.

contexte.fillRect(0,0,X/2,Y) : La partie gauche du canevas est rempli avec ce premier degradé.

Vous devez maintenant être capable de comprendre la deuxième partie du script : définition d'un dégradé linéaire tricolore avec un axe diagonal montant et utilisation de ce dégradé pour remplir la partie droite du canevas.

Si vous voulez appliquer un dégradé au canevas entier vous devez utiliser les dégradés CSS puisque canvas est un élément HTML.
Retour menu