Combiner Canvas et SVG pour produire une animation

Nous avons vu que pour simplifier la programmation d'une animation Canvas on peut superposer les canevas.
Ici nous allons plus loin. En effet pour créer cette animation je combine boîtes Canvas et images SVG.

Les décors sont des images SVG réalisés avec Inkscape et (incorporés via la balise img dans la page) alors que l'animation proprement dite est une balise Canvas (associée à un script).
Gros avantage : puisque le décor est un dessin vectoriel il reste parfaitement net même en cas d'agrandissement.
La fonction d'animation dans le script sera courte puisque qu'avec Canvas on se contente d'insérer à un autre endroit un "sprite" (une image matricielle).

Le code de la page

La feuille de style

	body {position :relative ;}
	canvas, img {position : absolute}
	div {position : absolute ; width : 100%;}
	@media screen and (min-width: 900px)	
	{
		canvas, img {width : 640px ; height : 400px; margin-left : -320px;left :50%;  }
		div {top:420px; left:0px;};
	}
	@media screen and (max-width: 899px)	
	{
		canvas, img {width : 320px ; height : 200px; margin-left : -160px; left :50%; }
		div {top:220px; left:0px;}
	}

Les canevas et images font 640 par 400 ou 320 par 200 en fonction de la largeur de l'écran.
Pour se superposer les balises Canvas et images 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

... <img src ="../images/ville.svg" id ="ville" style ="display : inline"> <img src ="../images/campagne.svg" id ="campagne" style ="display : none"> <canvas></canvas> <div> <button onclick ='changer()'>Changez de décor !</button> <h1>Combiner Canvas et SVG pour produire une animation</h1> ...

Une des images vectorielles est masquée et l'autre est visible.

Le script

	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var image = new Image(); 
	image.src = '../images/poids_lourd.png'; 
	var X =canevas.width;
	var Y = canevas.height;
	var x = 100;
	contexte.drawImage(image,x,100,80,50) ;
	setInterval(animate,50); //appel de la fonction animate 20 fois par seconde
	function animate()
	{
		contexte.clearRect(0,0,X,Y); 
		if (x <= -100) x = X  ; else x = x - 3 ;
		contexte.drawImage(image,x,100,80,50) ;
	} 
	function changer()
	{
		var ville = document.querySelector('#ville');
		var campagne = document.querySelector('#campagne');
		if(ville.style.display == 'inline') {ville.style.display ='none' ; campagne.style.display ='inline' ; }
		else  {ville.style.display ='inline' ; campagne.style.display ='none' ; }
	}

L'image PNG a été produite par le logiciel Inkscape : d'abord création d'un fichier au format SVG puis exportation au format PNG.
Retour menu