SVG à la rescousse de Canvas

Le décor de votre animation Canvas peut être une image vectorielle c'est à dire une image au format SVG ; dessin produit avec un logiciel tel Inkscape.
C'est ce que je vais faire ici : superposer un canevas (avec une animation) sur des fichiers SVG.
La fonction d'animation dans le script sera courte puisque qu'on se contente d'insérer à un autre endroit un "sprite" (une image PNG) et de le déplacer.

Le code de la page

Le CSS

body {position :relative ;} canvas, img {position : absolute ; width : 100% ; height : auto ;} div {position : absolute ; width : 100%; left :0px ; top : 320px;}

Le canevas et les images (vectorielles) ont une largeur de 100% de celle de l'écran donc le problème du centrage horizontal ne se pose pas.
Pour pouvoir se superposer les images vectorielles et les canevas sont positionnés en absolu au même emplacement dans l'écran.
Les commentaires sont contenus dans un DIV qui se positionne sous l'animation.

Le code HTML

<img src ="ville.svg" id ="ville" style ="display : inline"> <img src ="campagne.svg" id ="campagne" style ="display : none"> <canvas width ="300" height ="100"></canvas>

Une des images vectorielles est masquée et l'autre est visible.
Une image vectorielle simple (sans animation) peut être insérée avec la balise img (comme une image matricielle).
Les dimensions natives de ces images Inkscape sont 900 par 300 pixels.
Pour le script les dimensions du canevas seront 300 par 100 !

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,60,60,40) ;
	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,60,60,40) ;
	} 
	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 puis exportée au format PNG.
Retour menu