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

... <style> @media screen and (min-width: 900px) {canvas {width : 80% ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 80% ; height : 200px; }} ... <body> ... <canvas></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); ...

CSS : le canevas fait 80% de large et 400 ou 200 de haut selon la largeur de l'écran (page "responsive").
Utilisation des media queries. Si cette notion vous est inconnue consultez le tutoriel CSS.

JavaScript :

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 pouvez utiliser les dégradés CSS puisque canvas est un élément HTML.
Retour menu