Superposition de canevas

Problèmatique

Ci-dessus une animation réalisée en superposant trois canevas !

Si vous avez déjà utilisé des logiciels de dessin tels Gimp ou PhotoShop ou encore Inkscape vous connaissez la notion de calques.
Et vous savez qu'il est possible de réaliser un dessin complexe à partir de plusieurs calques simples.
Dans cette page on superpose trois boîtes CANVAS. Chaque canevas faisant fonction de calque.

Le code de cette page

Je pense que vous avez compris l'intérêt ici d'utiliser trois canevas : un code JavaScript beaucoup plus court.

Donc le code JavaScript aurait été très lourd ...

Alors qu'en utilisant trois canevas (un pour le fond, un autre pour les maisons et un dernier pour le camion) je ne dessine qu'une fois le décor et dans le cadre de la fonction d'animation je me contente de vider le troisième calque (contexte3.clearRect) et d'insérer seulement le camion (fichier png) avec un positionnement différent.

Donc dans le cadre d'une animation Canvas je vous conseille de superposer plusieurs canevas (au moins deux) : un contenant les formes inanimées et un autre contenant les formes animées (changent de taille et/ou de positionnement).
Mais attention vous devez alors maîtriser le positionnement absolu en CSS ...

Le code de la page

La feuille de style

body {position :relative ;} canvas {position : absolute} ... @media screen and (min-width: 900px) { canvas {width : 640px ; height : 400px; margin-left : -320px;left :50%; } ... } @media screen and (max-width: 899px) { canvas {width : 320px ; height : 200px; margin-left : -160px; left :50%; } ... }

Les canevas font 640 par 400 ou 320 par 200 en fonction de la largeur de l'écran.
Pour se superposer les balises Canvas doivent être positionnées en absolu. Il faut aussi que ces boîtes soient centrées horizontalement dans leur conteneur. Or comme vous devriez savoir le centrage horizontal d'une boîte positonnée en absolu est subtil.
En effet la technique des marges latérales automatiques ne fonctionne pas!
Il faut jouer sur deux propriétés : left: 50%et margin-left :-moitié de la largeur de la boîte à centrer.
La boîte DIV doit se positionner sous l'animation !

Le code HTML

<canvas id ='canevas1' style = 'background : skyblue; '></canvas> <canvas id ='canevas2' ></canvas> <canvas id ='canevas3' ></canvas> <div> <h1>Superposition de canevas</h1> <h2>Problèmatique</h2> ...

Le code HTML est basique ! Le premier canevas rempli de bleu ciel.

Les extraits de code et commentaires sont contenus dans DIV

Le script

	// je dessine la chaussée (rectangle grisé) dans le fond bleu du premier canevas
		var canevas1 = document.querySelector('#canevas1'); 
		var contexte1 = canevas1.getContext('2d');
		var X = canevas1.width ; 	
		var Y= canevas1.height ; 
		contexte1.fillStyle = "gray";
		contexte1.fillRect(0,Y/2,X,Y/2) ; 
		
		// deuxième canevas : les maisons 
		var canevas2 = document.querySelector('#canevas2'); 
		var contexte2 = canevas2.getContext('2d');
		for (i =1; i<=9 ; i++)
		{
			contexte2.fillStyle ='yellow'; 
			contexte2.fillRect(60,10,10,40); // cheminee
			contexte2.fillRect(20,50,60,30); // mur
			contexte2.fillStyle = 'red' ; 
			contexte2.arc(50,50, 30, Math.PI, Math.PI*2); //toiture
			contexte2.fill() ; // colorier toiture
			contexte2.fillStyle = 'black'; // changement couleur de remplissage
			contexte2.fillRect(30,60,10,10);
			contexte2.fillRect(50,60,10,20);
			contexte2.fillRect(65,60,10,10);
			contexte2.translate(100,0) ; // déplacement du point d'origine
		} 
		
		// déplacement du camion dans troisième canevas
		var canevas3 = document.querySelector('#canevas3'); 
		var contexte3 = canevas3.getContext('2d');
		var image = new Image(); 
		image.src = '../images/camion.png'; 
		var x = X;
		setInterval(animate,50); //appel de la fonction animate 20 fois par seconde
		function animate()
		{
			contexte3.clearRect(0, 0, X, Y); // vider le calque supérieur
			if (x <= -75) x = X  ; else x = x - 3 ;
			contexte3.drawImage(image,x,80,75,50) ;
		} 
		

Retour menu