Dessiner dans une page web : balises Canvas et SVG

Avec HTML5 il est désormais facile de produire directement dans le navigateur des images statiques voire animées.
Deux technologies sont possibles : API Canvas ou le langage (de type XML) SVG.

La balise Canvas

Exemple

Le code correspondant

Le code HTML

<canvas width = '800' height ='100' style = 'width : 80% ; height : auto ; background : lime; '></canvas>

Les coordonnées du repère sont données par les attributs width & height.

Le script

	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 	var Y = canevas.height ; 
	for (i =1; i<=8 ; i++)
		{
			contexte.fillStyle ='yellow'; 
			contexte.fillRect(60,10,10,40); // cheminee
			contexte.fillRect(20,50,60,30); // mur
			contexte.fillStyle = 'red' ; 
			contexte.arc(50, 50, 30, Math.PI, Math.PI*2); //toiture
			contexte.fill() ; // colorier toiture
			contexte.fillStyle = 'black'; // changement couleur de remplissage
			contexte.fillRect(30,60,10,10);
			contexte.fillRect(50,60,10,20);
			contexte.fillRect(65,60,10,10);
			contexte.translate(100,0) ; // déplacement du point d'origine
		} // fin for

Je ne commente pas le scrit. Si ça vous intéresse sachez qu'il y a dans mon site tout un tuto sur Canvas. API Canvas : dessins statiques et animations

La balise SVG

Exemple

Même thème (un lotissement de maisons identiques) mais traité cette fois avec SVG.

Je ne commmente pas le code SVG interne à la page. Si ça vous intéresse sachez qu'il y dans mon site tout un tuto sur le dessin statique via SVG et un autre pour les animations SVG. Dessiner dans une page avec SVG - dessin statique Animations SVG via CSS, JavaScript voire SMIL

Le code HTML & SVG correspondant

Les coordonnées du repère sont données par l'attribut viewBox.

<svg width = '80%' height = 'auto' style = 'background : lime; ' viewBox ="0 0 800 100" > <symbol id = 'maison'> <!--cheminee puis toit puis murs puis porte et fenêtres--> <rect x ='60' y = '10' width = '10' height = '40' fill = 'yellow'/> <circle cx = '50' cy = '50' r="30" fill = 'red' /> <rect x = '20' y = '50' height ='30' width = '60' fill = 'yellow' /> <rect x = '30' y = '60' height ='10' width = '10' fill = 'black' /> <rect x = '50' y = '60' height ='20' width = '10' fill = 'black' /> <rect x = '65' y = '60' height ='10' width = '10' fill = 'black' /> </symbol> <use xlink:href="#maison" width ="100" height="100" x="0" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="100" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="200" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="300" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="400" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="500" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="600" y="0" /> <use xlink:href="#maison" width ="100" height="100" x="700" y="0" /> </svg>

Animations

Avec Canvas ou SVG on peut produire non seulement des dessins statiques mais aussi des animations.

Animation avec SVG

Animez le SVG avec CSS !

Le texte est animé via CSS. C'est possible avec la version 3 de CSS qui propose les keyframes (modèles d'animation) ainsi que la méga propriété animation.

Animation avec Canvas

Les formes dessinées avec l'API Canvas ne sont pas des noeuds du DOM. L'animation des formes Canvas ne peut se faire qu'en JavaScript.

Sachez que SVG crée une image vectorielle alors que Canvas produit une image matricielle.
On a donc d’un côté, des formes définies à l’aide de formules mathématiques et de l’autre une "soupe de pixels".
Retour menu