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

Vous savez qu'une forme peut être remplie avec une couleur unie (par défaut le noir), qu'une forme peut être transparente (avec clearRect).
Dans ce chapitre je vais vous montrer qu'une forme peut etre remplie avec un dégradé ou un motif.

Dégradés radiaux

Exemple

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

Le canevas responsive fait 900 par 450.
La fonction JS (extrait) :

...
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()
...

On rencontre 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

Le canevas responsive fait 800 par 400.

La fonction JS (extrait) :

...
var canevas = document.querySelectorAll("canvas")[1];
	var contexte = canevas.getContext('2d');           
	var X = canevas.width; 			
	var Y = canevas.height ; 
	//définition du premier degradé
	var degrade3 = contexte.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é
	contexte.fillStyle = degrade3; 	
	contexte.fillRect(0,0,X/2,Y);
	// définition du deuxième dégradé linéaire
	var degrade4 = contexte.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
	contexte.fillStyle = degrade4; 	
	contexte.fillRect(X/2,0,X/2,Y);	
...

Ce script comprend plusieurs nouveautés !

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.

Canvas : créer et appliquer un motif à un canevas

Exemple

Le répère cartésien du canevas est 300 par 300 ; on le remplit avec la répétition d'une image (qui fait 160 par 160).

La fonction correspondante

function f3()
{
	var canevas = document.querySelectorAll('canvas')[2]; 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 		
	var Y = canevas.height ;
		
	var motif1 = new Image(); 
	motif1.src = '../images/html5_logo.png'; 
	motif1.onload = function() 
	{
		contexte.fillStyle = contexte.createPattern(motif1,'repeat'); 
		contexte.fillRect(0,0,X, Y); 
	}
} // fin fonction f3
f3();

var motif1 = new Image() : création d'une instance de l'objet Image
motif1.src = '../images/html5_logo.png' : l'objet Image a maintenant une source
motif1.onload = function() : sur chargement de l'image
contexte.fillStyle = contexte.createPattern(motif1,'repeat'): on définit un style de remplissage par la répétition du logo HTML5.
contexte.fillRect(0,0,X, Y) : remplissage de la totalité du canevas avec le motif défini

Dans la méthode createPattern le premier paramètre doit référencer un objet image. En d'autres termes avec Canvas un motif est forcément construit à partir d'une image existante et une seule ...
Le deuxième paramètre de la méthode createPattern peut être repeat ou repeat-x ou repeat-y ou encore no-repeat.

Canevas rempli avec un dégradé CSS

Ci-dessous le quatrième canevas de la page rempli avec un joli dégradé et avec insertion d'une image avec fond transparent.

Dois-je rappeler qu'une balise double CANVAS est un élément HTML et peut donc être rempli avec un dégradé CSS.
Les images PNG peuvent avoir des fonds transparents, ce qui est pratique pour l'insertion dans un canevas.

Le code correspondant

HTML & CSS : 
<canvas width ="600" height ="400" id ="canevas4" style ="width : 80%; height : auto ; background-image : 
		radial-gradient(farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);">
</canvas>
...
JS : 
function f4()
{
	var canevas = document.getElementById('canevas4'); 
	var contexte = canevas.getContext('2d'); 
	var X = canevas.width; 
	var Y = canevas.height; 
	var avion = new Image();
	avion.src = 'avion3.png'; 
	avion.onload =function()
	{
		contexte.drawImage(avion,100,100,100,70); 
	}

} // fin f4
f4(); // appel f4

Les dégradés CSS sont très succints. Suivez le lien : les dégradés CSS
Le canevas est identifié "canevas4".

La fonction JS est aussi succincte
Surtout un I majuscule dans "new Image()", c'est un constructeur !
L'image PNG insérée a un fond transparent.

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

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

Dégradés radiaux

Exemple

Le code correspondant

Dégradés linéaires

Exemple

Le code correspondant

Canvas : créer et appliquer un motif à un canevas

Exemple

La fonction correspondante

Canevas rempli avec un dégradé CSS

Le code correspondant