Tutoriel Canvas - sommaire

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.

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

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)

Pour définir un dégradé radial il faut utiliser la méthode createRadialGradient qui réclame 6 paramètres :
• 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 script correspondant

Le canevas responsive fait 800 par 400.

Le 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); ...

Le 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

On remplit le canevas de 300 par 300 avec la répétition d'une image (qui fait 160 par 160).

Le code correspondant

Le canevas fait 320 par 320.

Le script : ... var canevas3 = document.querySelectorAll('canvas')[2]; var contexte = canevas3.getContext('2d'); var X = canevas3.width ; var Y = canevas3.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); }

Analysons le script :
• 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. Effacer l'avion

Dois-je rappeler qu'une balise double CANVAS est un élément HTML, donc un noeud du DOM 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.

Cliquez sur le bouton de commande et l'avion disparait mais pas le fond.

Le code correspondant

Les dégradés CSS sont très succints. Suivez le lien : les dégradés CSS

Le script est lui aussi très court.
Surtout un I majuscule dans "new Image()", c'est un constructeur !
L'image PNG insérée a un fond transparent.
Au travers de cet exemple je vous montre que la commande clearRect() tous les objets insérés mais pas l'arrière plan.