Canvas : méthode clearRect() - Canvas et POO

intérêt de la balise NOSCRIPT dans une page contenant une ou plusieurs 'toiles' (canevas)
la méthode clearRect() de l'API Canvas
"programmer en objet" un script pour une meilleure lisibilité du code

Pourquoi utiliser la balise NOSCRIPT ?

Si vous avez désactivez JavaScript dans votre navigateur, les "toiles" de la page vont s'afficher mais elles vont rester désespérement vides ..
Donc dès que votre page web contient un script, pensez à utiliser le conteneur NOSCRIPT pour afficher un message qui signale éventuellement que ce dernier n'a pu être exécuté.

Le code de la partie HEAD de chaque page devient alors : ... <head> ... <noscript> <h4>Les canevas de cette page restent vides car JavaScript est désactivé par votre navigateur !</h4> </noscript> ... </head> <body> ...

La partie HEAD contient aussi le conteneur STYLE, les balises META et TITLE.

La méthode clearRect()

Cette méthode permet un effacement partiel d'une forme.

Exemple 1 : dessiner le drapeau de la Suisse

Le code correspondant

HTML : 
...
<canvas width = '400' height = '400' >
	Votre navigateur ne supporte pas Canvas
</canvas>

JS : 
function f1()
{
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	contexte.fillStyle = 'red'; 
	contexte.fillRect(100,100,200,200) ;
	contexte.clearRect(130,180,140,40);
	contexte.clearRect(180,130,40,140);
}
f1() ; //appel fonction

Commentaire du code

La zone de dessin Canvas fait 400 par 400.

Il faut d'abord créer un carré (200 de côté) centré dans la zone de dessin et rempli de rouge.
Puis il faut effacer une partie du rouge avec deux rectangles d'effacement : méthode clearRect(x,y,largeur, hauteur). Donc ces deux zones retrouvent un fond blanc (couleur de fond de l'élément CANVAS).
La méthode clearRect() efface partiellement la couche supérieure pour retrouver la couche en dessus.
Si vous voulez que la croix du drapeau soit de couleur rose il sufit de rajouter dans la balise CANVAS une règle de style en ligne : ...style ="background : pink;" ...

Vous verrez par la suite que la méthode clearRect() est très utile en matière d'animation.

Un peu de méthode

Mais comment déterminer les coordonnées de l'arête supérieure gauche de chaque rectangle d'effacement ?
Si vous voulez être productif (coder vite et bien) je vous conseille de faire un croquis (sur une feuille de papier millimétrée ou une feuille à petit carreaux) avant de coder proprement dit. Vous éviterez maints tâtonnements ...
Ci-dessous exemple de croquis : canvas croquis

Un deuxième exemple plus complexe

Affichez la console du navigateur afin de lire les résultats d'instructions provisoires.

Nous allons maintenant dessiner le drapeau norvégien !
Le canevas fait 640 par 460 et le drapeau occupe toute la zone de dessin.

il faut remplir toute la zone de rouge
puis il faut effacer (remplir en blanc) avec deux rectangles (un qui a pour largeur celle du canevas ; un autre qui a pour hauteur celle du canevas par 100)
il faut ensuite dessiner deux rectangles bleus (un qui a pour largeur celle du canevas ; un autre qui a pour hauteur celle du canevas par 60)

Le code correspondant

HTML : 
...
<canvas width = '640' height = '460' id ="canevas2" ></canvas>
...
JS : 
function f2()
{
	var canevas = document.getElementById('canevas2'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width;
	var Y = canevas.height;
	console.log("largeur du 2ième canevas " + X);
	console.log("hauteur  du 2ième canevas " + Y);
	// fond rouge
	contexte.fillStyle = "red" ; 
	contexte.fillRect(0,0,X,Y);
	// zones blanches
	contexte.clearRect(160,0,100,Y);
	contexte.clearRect(0,160,X,100);
	// zones bleues
	contexte.fillStyle ="navy";
	contexte.fillRect(180,0,60,Y);
	contexte.fillRect(0,180,X,60);
}
f2() ; // appel fonction

Je récupère dans les variables X et Y respectivement la largeur (640) et la hauteur (460) de ce deuxième canevas.
Je peux utiliser ces valeurs pour argumenter les méthodes fillRect(), clearRect(), etc.

Canvas et la POO

L'emploi de la POO permet d'obtenir des scripts plus lisibles, plus faciles à maintenir.

Ci-dessous un document HTML comprenant une "toile"

Les rectangles arrondis sont de plus en plus décalés et de plus en plus grands.
J'utilise la POO pour écrire le script.
JavaScript et la POO - notation JSON

Le code du document

La balise CANVAS définit un répère cartésien de 600 par 300.

Le script

Un objet nommé "rectangle" est défini avec la syntaxe JSON. On définit pour cet objet des propriétés et une méthode pour le dessiner.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// création d'un objet nommé rectangle 
var rectangle = 
{
  x: 0,
  y: 0,
  w : 100,
  h : 50,
  r : 8, 	//radius
  vx : 12, 	// variation abcisse
  vy : 6, 	// variation ordonnée
  vw : 8,  // variation width
  vh: 4,	// variation height
  vr : 2,	// variation radius
 dessin: function () 
  {
   	ctx.strokeStyle = "navy" ; 
	ctx.lineWidth = '4'; 
	ctx.roundRect(this.x, this.y, this.w, this.h, [this.r]);
	ctx.stroke(); 
   },
}; // fin définition objet rectangle

for (i=0; i<=9; i++)
{
	rectangle.x += rectangle.vx;
	rectangle.y += rectangle.vy;
	rectangle.w +=rectangle.vw ; 
	rectangle.h +=rectangle.vh ; 
	rectangle.r +=rectangle.vr; 
	rectangle.dessin() //appel méthode de l'objet
} // fin for

Je crée un objet littéral nommé "rectangle" via la notation JSON. Cet objet a 10 propriétés et une méthode (pour le dessiner) et nommée "dessin".
À chaque passage dans la boucle 5 propriétés de l'objet sont actualisées (x,y w,h,r) afin que les rectangles arrondis soient de plus en plus grands et décalés vers le bas et la droite.
Pour dessiner l'objet graphique il suffit d'appeler la méthode qui le dessine : rectangle.dessin()

partie 1 : construction de l'objet (avec une méthode pour le dessiner)
partie 2 : boucle dans laquelle certaines propriétés de l'objet sont actualisées ;
appel de la méthode de dessin

Nouvelle version du programme

Il suffit de modifier la définition de l'objet pour modifier radicalement l'apparence du dessin.

Modifiez le script pour que ce dernier produise 10 carrés qui diminuent de 10px à chaque fois avec un décalage de 20 vers la gauche et de 10 le haut ; le radius est toujours égal au quart de la largeur (ou hauteur). En effet le premier carré doit être tout en bas à droite, faire 150 par 150 avec un radius de 150/4

Le rendu :

Remarque :
Je me suis contenté de modifier la définition de l'objet "rectangle" : propriétés & méthode.

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Canvas : méthode clearRect() - Canvas et POO

Pourquoi utiliser la balise NOSCRIPT ?

La méthode clearRect()

Exemple 1 : dessiner le drapeau de la Suisse

Le code correspondant

Commentaire du code

Un peu de méthode

Un deuxième exemple plus complexe

Le code correspondant

Canvas et la POO

Ci-dessous un document HTML comprenant une "toile"

Le code du document

Le script

Nouvelle version du programme