CANVAS API HTML 5 : Dessiner, animer, créer des graphiques, des images

Le 10 Novembre 2010

Qu'est ce que le HTML 5 ?

HTML qui a pour abréviation HyperText Markup Language se traduit par langage de balisage hypertexte. Il permet de structurer les pages web avec des balises. Ce langage est en perpétuel évolution. HTML 5 est la dernière version du HTML qui est en cours de standardisation.

Cette dernière version apporte de nombreuses nouveautées. Les principaux navigateurs web se sont eux aussi mises à jour : bientôt aussi pour Internet Explorer avec sa 9ème version. Désormais avec la balise audio ou vidéo, il est possible d’intégrer un son ou une vidéo dans la page web et cela très simplement. Il sera possible aussi de stocker des données temporairement dans le navigateur en mode offline. La liste est longue, je ne peux pas continuer à lister toutes les nouveautés.

Ce qui retient particulièrement mon attention est la balise canvas : il est possible de créer un graphique, une image ou une animation interactive dans l’élément canvas. C’est l’une des spécifités la plus intéressante, on peut dire qu'elle est concurrence avec Adobe Flash et Microsoft Silverlight qui nécessite l’installation d’un plugin dans le navigateur. Il est clair que l’expérience utilisateur sur le web sera accrue et c’est tant mieux comme ca. Dans la suite de cette article je m’intéresse uniquement à la balise canvas.

Approfondissement sur la balise CANVAS

Un canvas est un élément rectangulaire par défaut 300px/150px pouvant être redimensionné. À l’intérieur de ce canvas on manipule du JavaScript pour représenter toute sorte de graphique ou image. Pour le moment la balise canvas n'est supportée que dans les dernières versions de Firefox, Safari, Chrome, Opera et Internet Explorer 9.

<canvas></canvas> est la balise à ajouter dans sa page html. La représentation d’un graphique se fait en deux dimensions. Chaque point a une coordonnée (x,y) à définir. L’origine du repère est (0,0) qui n'est pas au centre du canvas mais en haut à gauche. Pour x=5, y=3 : on a x qui se déplace de gauche à droite et y de haut en bas.

Comment créer un trait vertical, horizontal, diagonal ?

Trait vertical

Il suffit d’insérer la balise <canvas></canvas> dans le body de la page web. On peut spécifier la largeur (width) et la hauteur (height). On ajoute aussi un identifiant ID au canvas.

<body>
	<canvas id="trait_verti" width="400" height="300"></canvas>
</body>

Je peux ajouter un texte et quelques styles.

<body>
	<div class="grid ">
		<h1>Trait vertical</h1>
		<canvas id="trait_verti" width="400" height="300"></canvas>
	</div>
</body>

Le style est à ajouter dans le head de la page web.

<style type="text/css">
	canvas {
		border: 3px solid #444;
	}
	.grid	{
		float:left;
		width:400px;
		margin:0 5px;
	}
	.grid h1 {font-size:25px;text-align:center;}
	.grid p {text-align:left;}
</style>

Il ne reste plus que les instructions en JavaScript pour tracer un trait.

<script type="text/javascript">
	function traitvertical() {
		var objet = document.getElementById('trait_verti');
		var dessin = objet.getContext('2d');
						
		dessin.beginPath();
		dessin.moveTo(150, 50);
		dessin.lineTo(150,200);
		dessin.strokeStyle ='orange';
		dessin.stroke();
		dessin.closePath();
	}
	window.addEventListener("load", traitvertical, false);
</script>

Je crée la fonction traitvertical qui aura pour fonction de tracer un trait vertical. Je crée un élément objet et je lui assigne le ID trait_verti. Je définis le type de dessin avec la commande getContext(‘2d’). Il s’agit d’un dessin en deux dimensions (x,y). moveTo(x,y) positionne le premier point et lineTo(x,y) le dernier point du trait. beginPath(), closePath() désignent respectivement le début et la fin du parcours du tracé. L’instruction stroke() trace le trait. Je choisis la couleur orange, par défaut le trait est de 1 px. À l’ouverture de la page web, je charge la fonction traitvertical.

Trait horizontal

La fonction écrite en JavaScript :

function traithorizontal() {
	var objet = document.getElementById('trait_hori');
	var dessin = objet.getContext('2d');
	
	dessin.beginPath();
	dessin.moveTo(50, 150);
	dessin.lineTo(300,150);
	dessin.strokeStyle ='orange';
	dessin.stroke();
	dessin.closePath();
}

Trait diagonal

La fonction écrite en JavaScript :

function traitdiagonal() {
	var objet = document.getElementById('trait_diag');
	var dessin = objet.getContext('2d');
	
	dessin.beginPath();
	dessin.moveTo(50, 100);
	dessin.lineTo(300,250);
	dessin.strokeStyle ='orange';
	dessin.stroke();
	dessin.closePath();						
}

Quelques exemples de traces

Méthodes présentes dans le code :

fillStyle couleur de remplissage
fillRect(position x, position y, largeur, hauteur) trace un rectangle
fill() remplissage de l’élément
strokeStyle couleur du trait
lineWidth épaisseur du trait
lineJoin forme du coin : round (arrondi), bevel (plat), miter (pointu)
lineCap forme du bout du trait : round (arrondi), square (carré), butt (carré plus petit que square)
translate(x,y) translation du point de coordonnées(x,y)
quadraticCurveTo(position x du point de contrôle, position y du point de contrôle, position final x, position final y)
bezierCurveTo(position x du 1er point de contrôle, position y du 1er point de contrôle, position x du 2ème point de contrôle, position y du 2ème point de contrôle, position final x, position final y)
arc(position x du début de l’arc, position y du début de l’arc, rayon, début de l’angle de l’arc, fin de l’angle de l’arc, booléen sens de rotation).

Les méthodes quadraticCurveTo, bezierCurveTo, arc sont difficiles à manipuler. Je conseille de faire des essais pour comprendre leur utilisation.

shadowBlur niveau du flou de l’ombre
shadowOffsetX décalage en x de la position de l’ombre
shadowOffsetY décalage en y de la position de l’ombre
shadowColor couleur de l’ombre
font police/format du texte
fillText (« texte à afficher », position x, position y, largeur facultatif)
createLinearGradient(position x du 1er point, position y du 1er point, position x du 2ème point, position y du 2ème point)
addColorStop(position de l’arrêt 0.0 à 1, couleur )
globalCompositeOperation type de chaîne représentant plusieurs types de compositions : source-over, destination-over, source-in, destination-in, source-out, destination-out, source-atop, destination-atop, lighter, darker, xor, copy.

Transformation d’une image couleur RGBA en une image modifiée

L’image couleur a quatre composantes dont trois composantes couleurs rouge, vert, bleu et une composante alpha. C'est-à-dire que chaque pixel a quatre valeurs comprises entre 0 et 255.

Rouge : (largeur*y + x)*4
Vert : (largeur*y + x)*4 + 1
Bleu : (largeur*y +x)*4 + 2
Alpha : (largeur*y + x)*4 + 3

À l’aide de la commande getImageData, on obtient les valeurs de chacun des pixels de l'image. Nous parcourons ensuite tous les pixels avec une double boucle for car l'image et le canvas sont à deux dimensions. On soustrait les valeurs des pixels des composantes RGB (Red, Green, Blue) par des valeurs choisies. Les valeurs des pixels RGB doivent être comprises entre 0 et 255. Si une des valeurs est inférieure à zéro alors cette valeur vaut zéro. Après le traitement on met à jours notre canvas avec la méthode putImageData et on dessine la nouvelle image avec la commande drawImage. Enfin on n’oublie pas d’indiquer l’image couleur de départ avec l’instruction .src = « image.jpg ».

Vous avez des questions sur l'article ou autre n’hésitez pas.

Référence

https://developer.mozilla.org/en/HTML/Canvas

Autres articles à lire

Diagramme circulaire, diagramme en secteur circulaire, camembert avec l'élément CANVAS de l'API HTML 5
Diagramme rectangulaire, diagramme en bâtons, histogramme avec l'élément CANVAS de l'API HTML 5

Twitter

Blog