Canevas 'responsive' - méthode clearRect() - Canvas et POO

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

Pourquoi utiliser la balise NOSCRIPT ?

Si vous avez désactivé JavaScript sur votre navigateur, les zones de dessin correspondant aux éléments canvas resteront vides !
Donc dès que votre page web contient un script JS, pensez à utiliser le conteneur NOSCRIPT (dans la partie HEAD) pour afficher un message d'avertissement à l'internaute.

Structure de la page web

Le code de la partie HEAD de chaque page devient alors : ... <head> ... <noscript> <h4>Les zones de dessin restent vides car JavaScript est désactivé</h4> </noscript> ... </head> ...

Dessiner le drapeau suisse

Via cet exemple je vous montre comment réaliser un canevas 'responsive' (qui s'affiche proprement quelque soit l'écran) et comment utiliser dans le script la méthode clearRect().

Le rendu

Le canevas est centré horizontalement est à une largeur égale à 60% de celle de son parent (BODY).

Le code correspondant

Le code HTML

...
<canvas width = '400' height = '400' style = "width : 60% ; height : auto;"></canvas>
...

canvas

une fois en tant qu'attribut
une fois en tant que propriété CSS (règle de style en ligne)

La propriété width détermine la largeur d'affichage de la toile dans la page ; ici 60% de la largeur du conteneur parent.
Les attributs width & height définissent quant à eux le repère cartésien de ce canevas. Les formes se positionnent en fonction de ce repère et de leurs paramètres.
la propriété CSS height est à "auto". Donc la hauteur d'affichage sera liée au ratio largeur/hauteur défini par les attributs width & height. Ici la toile sera aussi haute que large puisque le ration est 400 par 400 donc 1.

Dans le chapitre précédent les canevas étaient déjà 'responsive'. Donc je vous ai un peu menti ; concernant le code de l'instruction canvas ; il y avait déjà une règle de style en ligne : style ="width : 60% ; height : auto;"
J'espère que vous m'excuserez de ce mensonge à des fins pédagogiques.

Le script pour ce premier canevas

function suisse()
{
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	contexte.fillStyle = 'red'; 
	contexte.fillRect(0,0,400,400) ;
	contexte.clearRect(150,50,100,300);
	contexte.clearRect(50,150,300,100);
}
suisse() ; //appel fonction

Il faut remplir toute la 'toile' de rouge.
Puis il faut effacer par un bande horizontale et par une bande verticale.

Attention ne pensez pas que clearRect() remplit de blanc. Ici la croix est blanche car le fond de la toile a cette couleur.
Faites un test : rajoutez dans la règle de style de la balise canvas : style ="... background : yellow; " et observez ...

Le script : autre solution

Les paramètres des méthodes peuvent être des variables.

	...
	contexte.fillStyle = 'red'; 
	var X = canevas.width; // retourne 400
	var Y = canevas.height; // retourne 400
	contexte.fillRect(0,0,X,Y) ; // entièreté de la toile remplie de rouge
	contexte.clearRect(150,50,X/4,X/4*3);
	contexte.clearRect(50,150,X/4*3,X/4);
	...

Les deux bandes blanches qui se croisent ont une largeur de 1/4 et une longueur de 3/4 du côté.

TP : le drapeau norvégien

Le rendu

Le code

L'instruction HTML

...
<canvas width = '640' height = '460'  style ="width : 60% ; height : auto;" id ="canevas2"></canvas>
...

Le script

À vous de le reconstituer. Je vous communique des extraits, à vous de compléter en fonction de la procédure indiquée.

La procédure :

il faut remplir tout le canevas de rouge.
puis il faut gommer avec deux rectangles (un qui a pour largeur celle du canevas par 100 ; un autre qui a pour hauteur celle du canevas par 100)
il faut alors dessiner deux rectangles bleus (un qui a pour largeur celle du canevas par 60 ; un autre qui a pour hauteur celle du canevas par 60)

Le script à compléter

function norvege()
{
		var canevas = ...
		var contexte = ...
		var X = ...
		var Y = ...
		// fond rouge pour toute la toile
		contexte.fillStyle = ...
		contexte.fillRect(...);
		// zones blanches
		contexte.clearRect(...);
		contexte.clearRect(...);
		// zones bleues
		contexte.fillStyle =...
		contexte.fillRect(...);
		contexte.fillRect(...);
}
norvege() ; // appel fonction

Canvas et la POO

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

Ci-dessous un document HTML inséré via un Iframe dans cette page

Ce document HTML contient un élément canvas.

Les rectangles arrondis sont de plus en plus décalés et de plus en plus grands.

Le code HTML du document

...
<canvas id="canvas" width="600" height="400" style =" width : 80%; border : 5px solid olive;
	box-shadow : -5px -5px 5px gray ; border-radius : 10px ;">
</canvas>
...

la règle "height : auto" n'est pas obligatoire puisque c'est la valeur par défaut de cette propriété.

Le script dans ce document

Il est orienté POO : on définit un objet "rectangle" avec N propriétés et une méthode..

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var X = canvas.width;
var Y =canvas.height;

// création d'un objet nommé rectangle 
var rectangle = 
{
  x: 0,
  y: 0,
  w : X/4,
  h : Y/4,
  r : 10, 	//radius
  vx : 15, 	// variation abcisse
  vy : 10, 	// variation ordonnée
  vw : 15,  // variation width
  vh: 10,	// 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).

À 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().
Pour en savoir davantage sur la notation JSON

L'orientation objet d'un script ne le rend pas forcément plus concis mais surtout il le rend plus lisible.
Ainsi si vous voulez un empilement de ronds, vous savez qu'il faut modifier la définition de l'objet "rectangle" ; il faut que le radius soit initialement égal à la moitié du côté donc à X/8.
Il faut que les paramètres x & y soient incrementés de la même valeur et que le radius soit incrémenté de la moitié de cette valeur.
Pour résumer vous ne modifiez que la définition de l'objet.

Travaux pratiques de POO

En vous inspirant du canevas précédent, êtes-vous capable de réaliser le document HTML ci-dessous ? Le canevas qu'il contient a les mêmes caractéristiques que précédemment.

Les ronds sont de plus en plus petits et sont décalés de la droite et vers le haut.

Le constructeur path2D()

Depuis peu l'API Canvas propose une technique originale pour créer des objets graphiques et les appeler N fois.
le constructeur Path2D()

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Canevas 'responsive' - méthode clearRect() - Canvas et POO

Pourquoi utiliser la balise NOSCRIPT ?

Structure de la page web

Dessiner le drapeau suisse

Le rendu

Le code correspondant

Le code HTML

Le script pour ce premier canevas

Le script : autre solution

TP : le drapeau norvégien

Le rendu

Le code

L'instruction HTML

Le script

La procédure :

Le script à compléter

Canvas et la POO

Ci-dessous un document HTML inséré via un Iframe dans cette page

Le code HTML du document

Le script dans ce document

Travaux pratiques de POO

Le constructeur path2D()