Traduction
Tutoriel Canvas - sommaire
Tutoriel Canvas - recherche
L'auteur : Patrick Darcheville
Encore une bonne nouvelle ; c'est désormais très facile de filtrer les formes et images d'un canevas.
Ci-dessous rendu d'un document HTML contenant un canevas qui insère 4 fois la même image : version originale, sépia,
floutage, inversion.
Le script dans ce document :
Vous reconnaissez la syntaxe très "light" des filtres en CSS :
sepia(1) blur(3px) invert(1).
Il est possible de chainer plusieurs fonctions de filtre.
Ci-dessous un document HTML contenant un canevas. Ce dernier insère une photo deux fois. La copie de droite
subit un filtrage complexe : plusieurs primitives.
Le script dans ce document:
Notez la valeur de la propriété contexte.filter : il suffit de séparer d'un espace les différentes primitives.
Un filtre CSS peut être basé sur la fonction drop-shadow().
Cette fonction a alors pour effet d'ombrer les objets du canevas.
Notez le dégradé linéaire CSS en guise de "background" de l'élément canvas.
Le script qui remplit ce canevas se résume en six lignes :
La fonction drop-shadow() prend quatre arguments : offsetX, offsetY, floutage, couleur.
Les deux premiers arguments peuvent être négatifs.
Vous savez déjà qu'une forme peut être remplie avec une couleur unie (par défaut le noir),
qu'une forme peut être transparente (avec clearRect).
Commençons par les dégradés radiaux parfaitement adaptés pour remplir cercles et ellipses.
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.
L'élément canvas définit un repère de 800 par 400, l'attribut ID est absent.
Dans l'exemple et pour les deux dégradés le centre du cercle intérieur coïncide avec le centre du cercle extérieur.
Ce canevas comprend deux carrés de 400 par 400. Le carré de gauche est rempli avec un dégradé linéaire bicolore
selon un axe diagonal descendant ; le carré de droite est rempli avec un dégradé linéaire tricolore selon un axe
diagonal montant.
La balise canvas définit un repère de 800 par 400, l'attribut ID est absent.
Le code :
Ci-dessous je commente que la première partie du script : définition et application d'un dégradé linéaire pour le carré de gauche.
Vous devriez désormais ê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.
Les méthodes createRadialGradient() & createLinearRadient() manquent de souplesse.
La balise canvas définit un repère de 300 par 300 ; l'attribut ID est absent.
Le premier argument référence une image.
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Canvas : filtres, dégradés & motifs
Dans ce chapitre je vais aborder trois points importants pour produire de beaux canevas :
Filtre les objets du canevas
En effet la valeur de la propriété filter peut être une expression CSS.
Exemple 1
...
var X =canevas.width;
var Y =canevas.height;
var jolie = new Image();
jolie.src ="../images/noire_bikini.jpg" ;
jolie.onload = function()
{
contexte.drawImage(jolie,0,0, X/2,Y/2);
contexte.filter ="sepia(1)";
contexte.drawImage(jolie,300,0, X/2,Y/2);
contexte.filter ="blur(3px)";
contexte.drawImage(jolie,0,400, X/2,Y/2);
contexte.filter ="invert(1)";
contexte.drawImage(jolie,300,400, X/2,Y/2);
} // fin fonction anonyme
...
Exemple 2
...
var X =canevas.width;
var Y =canevas.height;
var jolie = new Image();
jolie.src ="../images/latino_bikini.jpg" ;
jolie.onload = function()
{
contexte.drawImage(jolie,0,0, X/2,Y);
contexte.filter = "hue-rotate(270deg) blur(2px)";
contexte.drawImage(jolie,300,0, X/2,Y);
}// fin fonction anonyme
...
Ombrer les formes et chemins avec des filtres CSS
Exemple
Ci-dessous un document HTML contenant une 'toile' :
Le code HTML
var canevas = document.querySelector('canvas');
var contexte = canevas.getContext('2d');
contexte.fillStyle ="white";
contexte.filter = "blur(2px) drop-shadow(10px 10px 5px gray)";
var croix = new Path2D('M170,50 h60 v50 h60 v60 h-60 v90 h110 v60 h-110
v90 h-60 v-90 h-110 v-60 h110 v-90 h-60 v-60 h60 v-50 z');
contexte.fill(croix);
Pour en savoir davantage sur les filtres CSS
Les dégradés
Une forme du canevas peut être remplie avec un dégradé linéaire ou radial défini dans le script.
Il est impossible d'appliquer un dégradé CSS à une forme du canevas
Par contre l'élément canvas étant un objet HTML, on peut lui appliquer un dégradé CSS.
Dégradés radiaux
Exemple
Le code correspondant
Le code :
...
function f1()
{
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(200,200,0,200,200,250) ;
// 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(200,200,200, 0, Math.PI*2);
contexte.fill();
// dégradé radial pour le cercle de droite
var degrade2 = contexte.createRadialGradient(600,200,0,600,200,250) ;
// 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(600,200,200,0, Math.PI*2);
contexte.fill()
}
f1();
...
Pour définir un dégradé radial il faut utiliser la méthode createRadialGradient qui réclame 6 paramètres :
Dégradés linéaires
Exemple
Le code correspondant
...
function f2()
{
var canevas = document.querySelectorAll("canvas")[1];
var contexte = canevas.getContext('2d');
//définition d'un dégradé linéaire
var lineaire = contexte.createLinearGradient(0,0,400,400);
// axe : diagonale descendante
lineaire.addColorStop(0,"green");
lineaire.addColorStop(1,"white");
contexte.fillStyle = lineaire;
// carré de gauche rempli avec lineaire
contexte.fillRect(0,0,400,400);
// définition du deuxième dégradé linéaire
var lineaire2 = contexte.createLinearGradient(400,400,800,0);
// axe : diagonale montante
lineaire2.addColorStop(0,"purple");
lineaire2.addColorStop(0.5,"pink");
lineaire2.addColorStop(1,"white");
// remplissage du carré de droite
contexte.fillStyle = lineaire2;
//carre de droite rempli avec lineaire2
contexte.fillRect(400,0,400,400);
}
f2();
...
Notez bien la syntaxe : var lineaire = contexte.createLinearGradient(0,0,400,400)
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 400, 400.
lineaire.addColorStop(0,"green"); lineaire.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 et le deuxième argument : une couleur.
contexte.fillStyle = lineaire: définition du style de remplissage pour la forme dessinée dans l'instruction suivante.
contexte.fillRect(0,0,400,400) : application du dégradé au carré de gauche.
Remarque concernant les dégradés
Il semble impossible de définir un dégradé unique puis de l'appliquer à différentes formes comme c'est possible en CSS.
En effet les paramètres d'un dégradés Canvas sont liés à ceux de la forme à remplir.
Remplir une forme avec un motif
Exemple
Le code
Le code JS
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();
Analysons les nouveautés dans ce script :
Syntaxe de la méthode createPattern()
Le deuxième peut être repeat ou repeat-x ou repeat-y ou encore no-repeat.