Dessiner dans une page web : balises Canvas et SVG

Attention les balises CANVAS & SVG de la spécification HTML5 se contentent de créer des zones de dessin vides.
Il faut ensuite utiliser un script pour remplir le canevas Canvas.
Quant au canevas SVG il faut utiliser le langage du même nom pour le remplir de formes.

La balise Canvas

Exemple

Le code correspondant

Le code HTML

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 script. 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.

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

Le code HTML & SVG correspondant

Je ne commmente pas le code SVG. 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

Animations

Avec Canvas ou SVG on peut produire non seulement des dessins statiques mais aussi de véritables 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

SVG crée une image vectorielle alors que Canvas produit une image matricielle.
Un dessin vectoriel peut être étiré à l'infini sans perte de qualité, ce qui n'est guère le cas d'une image matricielle.
Sachez qu'il existe des frameworks SVG. Le plus célèbre est Snap SVG.
Il existe aussi désormais des librairies Canvas. La plus connue est fabric.js.
Retour menu