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 zones de dessin 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 script aurait été 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.

Le code de la page

La feuille de style

body {position :relative ;} canvas {position : absolute ; width : 80% ; height : auto ; left : 10%;} div {position : absolute; width : 100%; left : 0px; top : 400px; }

Pour que les canevas se superposent parfaitement ils doivent être tous les trois positionnés en absolu.
Or la largeur de chaque canevas dans son conteneur n'est pas 100% mais 80%. Il se pose donc le problème du centrage horizontal d'où la règle left : 10%.
Je rappelle que le positionnement absolu s'effectue par rapport au conteneur parent si ce dernier est lui-même positionné en absolu ou relatif d'où la règle : body {position : relative}

Le code HTML

<canvas id ='canevas1' width ="300" height ="150" style = "background-image: url(../images/ciel_rose.jpg);"></canvas> <canvas id ='canevas2' style = "background-image: url(ville2.svg); background-size :cover;" ></canvas> <canvas id ='canevas3'width ="300" height ="150" ></canvas>

Le premier canevas a pour "background" une belle image matricielle.
Le deuxième canevas a pour "background" une image vectorielle produite avec Inkscape et avec un fond transparent.
Le troisième canevas contient l'animation.

Pour le deuxième canevas les attributs width et height sont inutiles par contre pour les premier et troisième il faut impérativement un système de coordonnées pour que le script fonctionne !

Le script

Il ne concerne que les premiers et troisième canevas.

// je dessine la chaussée (rectangle grisé) dans le premier canevas // au dessus du superbe ciel rosé var canevas1 = document.querySelector('#canevas1'); var contexte1 = canevas1.getContext('2d'); var X = canevas1.width ; // vaut 300 var Y= canevas1.height ; // vaut 150 contexte1.fillStyle = "gray"; contexte1.fillRect(0,120,X,30) ; // 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 canevas if (x <= -75) x = X ; else x = x - 3 ; contexte3.drawImage(image,x,100,75,50) ; }

Pour le script chaque canevas fait 300 par 150 donc je n'utilise que deux variables X et Y et non pas trois paires !