Canvas : dégradés radiaux et linéaires

Une forme canvas peut être remplie avec un dégradé linéaire ou radial.
Examinons d'abord les dégradés radiaux puis les dégradés linéaires.

Dégradés radiaux

Exmple

Le canevas comprend deux parties. Le cercle de gauche est rempli avec un dégradé radial tricolore et le cercle de droite est rempli avec un dégradé radial tricolore également mais avec un cercle rouge de rayon X/8 non dégradé.

Le code correspondant

	...
		<canvas width ="900" height ="450" style ="width : 80% ; height :auto;"></canvas>
		...
		<script>
		var canevas = document.querySelector("canvas");
		var contexte = canevas.getContext('2d');
		X = canevas.width;
		Y =canevas.height;
		// degradé radial pour le cercle de gauche
		var degrade1 = contexte.createRadialGradient(X/4,Y/2,0,X/4,Y/2,X/3) ; 
		// dégrade de violet à blanc en passant à rose ; dégradé commence immédiatement
		degrade1.addColorStop(0,"purple"); 
		degrade1.addColorStop(0.5,"pink"); 
		degrade1.addColorStop(1,"white");
		contexte.fillStyle = degrade1;
		contexte.arc(X/4, Y/2, X/4, 0, Math.PI*2); 
		contexte.fill(); 
		
		// dégradé radial pour le cercle de droite
		var degrade2 = contexte.createRadialGradient(X/4*3,Y/2,X/8,X/4*3,Y/2,X/3) ; 
		// dégrade de rouge à blanc en passant par orange ; dégradé différé de 50
		degrade2.addColorStop(0,"red"); 	
		degrade2.addColorStop(0.5,"orange"); 
		degrade2.addColorStop(1,"white");
		contexte.fillStyle = degrade2;
		contexte.beginPath(); 
		contexte.arc(X/4*3, Y/2, X/4, 0, Math.PI*2); 
		contexte.fill(); 
		...

HTML & CC

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

Il faut manipuler le premier élément "canvas" de la page. Le premier élément d'une collection est retourné par la méthode document.querySelector(balise).

On rencontre ensuite dans le script une nouvelle méthode de l'API canvas : var degrade 1 = contexte.createRadialGradient(X/4,Y/2,0,X/4,Y/2,300)

createRadialGradient

coordonnées x et y du centre du cercle intérieur (1er et 2ième paramètres)
rayon du cercle intérieur (3ième paramètre)
coordonnées x et y du centre du cercle extérieur (4ième et 5ième paramètres)
rayon du cercle extérieur (6ième paramètre)

Pour un bon rendu il est souhaitable que les deux cercles aient le même centre. Ce qui est le cas ici pour les deux dégradés radiaux.En effet dans chaque cas le premier paramètre est égal au troisième et le deuxième paramètre est égal au cinquième.

Pour le premier dégradé le rayon du cercle intérieur (troisième paramètre) est 0 ce qui veut dire que la première couleur (purple) se dégrade immédiatement alors que dans le deuxième dégradé la valeur du rayon du centre intérieur est X/8 donc il y a au centre un rond rouge de rayon X/8 uni.

Dégradés linéaires

Exemple

Le deuxième canevas de la page comprend deux carrés. Le carré de gauche est rempli avec un dégradé linéaire bicolore et le carré de droite est rempli avec un dégradé linéaire tricolore.

Le code correspondant

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

HTML & CSS

Le canevas est adaptatif ; largeur d'affichage égale à 80% de celle du conteneur. Mais pour le script le canevas fait 900 par 450.
Donc la hauteur d'affichage sera toujours égale à la moitié de la largeur.

Le script

Attention il faut manipuler le deuxième canevas de la page !
Le deuxième élément de type "canvas" a l'indice 1 ! Pour sélectionner le deuxième canevas il faut utiliser la méthode document.querySelectorAll(balise)[indice].

On rencontre ensuite dans le script une nouvelle méthode de l'API Canvas : var degrade3 =contexte2.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.
degrade3.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.

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

contexte2.fillRect(0,0,X/2,Y) : La partie gauche du deuxième canevas de la page est remplie 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.
Retour menu