Tutoriel Canvas - sommaire

Canvas : dessiner cercles, ellipses et arcs (de cercle ou d'ellipse)

Afficher pour cette page la console du navigateur car les scripts contiennent des instructions provisoires de type console.log(...)

Remarque préalable

Extrait de la feuille de style interne de cette page web :

	.toile{width : 60% ; height : auto; }

En appliquant cette classe à un canevas, celui-ci devient 'responsive'.

Dessiner des cercles et des arcs de cercle

En appliquant la classe 'toile' à un élément canvas celui-ci devient 'responsive'.

Premier canevas de la page : deux cercles

Le code correspondant

Les propriétés CSS "width & height" sont appliquées à l'élément canvas via la classe "toile".

Bug

Il y a un gros 'bug' dans notre code : un segment disgracieux entre les deux cercles ! Par ailleurs le premier cercle est borduré d'orange alors que je ne voulais qu'un remplissage en jaune ...
La raison est simple : nous avons oublié de "lever le crayon" entre les deux cercles !
Pour avoir un code qui donne un rendu correct, il suffit d'insérer une instruction juste avant contexte.arc() du deuxième cercle. Cette instruction est : contexte.beginPath() pour indiquer le début d'un nouvel objet graphique.

Le bon rendu

Le code correspondant

La méthode arc()

Pour dessiner un cercle (ou un arc de cercle) il faut utiliser la méthode arc().

Il faut passer cinq paramètres : x, y, r, angle départ, angle fin :
• x et y sont les coordonnées du centre du cercle
• r : rayon du cercle
• points A et B sur la circonférence (exprimés en radians)

Sixième argument facultatif : un Booléen qui, si il vaut true, indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.

Les deux derniers paramètres doivent être exprimés en radians.
Les autres paramètres sont exprimés en pixels (toujours sans préciser l'unité).

Pour l'API Canvas, un cercle c'est un arc de cercle de 360% (ou 2 π radians) : point de départ = 0 et point d'arrivée = 2 π radians.
Pour désigner la constante π dans le script on utilise : Math.PI) (propriété PI de l'objet Math).

Pour convertir des degrés en radians, vous pouvez utiliser l'expression suivante : radians = Math.PI/180 * degres.

Dessiner des cercles : astuce

Un cercle c'est un carré dont les angles arrondis ont pour radius la moitié du côté.
Donc vous pouvez utiliser la méthode roundRect(x,y,cote,cote,[cote/2]).

Dessiner des arcs de cercle

Rappels mathématiques : un arc de cercle est une portion de cercle limitée par deux points A et B situés sur la circonférence.

Ci-dessous le deuxième canevas comprenant deux demi-cercles remplis par une couleur orange.

Le script

La balise canvas définit un repère cartésien de 300 par 300 et est identifiée "canevas2".
Donc le script peut s'écrire :

function fcanevas2()
{
	var canevas = document.querySelector('#canevas2');
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 		
	var Y = canevas.height ; 
	console.log(X + " " +typeof(X));
	console.log(Y + " " +typeof(Y));
	contexte.fillStyle ='orange'; 
	contexte.beginPath(); 
	contexte.arc(X/3, Y/2, X/6, 0, Math.PI); 
	//premier demi cercle
	contexte.fill(); 
	contexte.arc(X/3*2, Y/2, X/6, Math.PI, Math.PI*2); 
	//deuxième demi-cercle
	contexte.fill(); 
}
fcanevas2(); 

Les arcs de cercle sont dessinés par défaut, dans le sens des aiguilles d'une montre en partant de l'est. Voir schéma ci-dessous.

Comment préciser les point de départ et d'arrivée de l'angle ?

Le schéma ci-dessous vous indique que le point 0 est aussi le point 2π (radians).

Ellipses et arcs d'ellipse

La méthode ellipse() est récente et n'est pas encore implémentée sur tous les navigateurs. Je présente donc plus loin dans le chapitre une solution alernative.

Paramétrer la méthode ellipse

Pour produire des ellipses ou arcs d'ellipse il faut utiliser la méthode ellipse avec 7 paramètres !

Les paramètres de la méthode sont dans l'ordre :
• x : coordonnée sur axe X du centre de l'ellipse
• y : coordonnée sur l'axe Y du centre de l'ellipse.
• rx : rayon sur l'axe X de l'ellipse
• ry : rayon sur l'axe Y de l'ellipse
• rotation : exprimée en radians (ou égal à zéro)
• point A (exprimé en radians)
• point B (exprimé en radians)

Huitième argument facultatif : Un Boolean optionnel qui s'il vaut true dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.

Dessiner des ellipses

Ci-dessous le troisième canevas de cette page web avec deux ellipses complètes.

Le script

La balise canvas définit un repère cartésien de 400 par 400 et est identifiée "canevas3".
Donc le script qui en découle :

function fcanevas3()
{		
	var canevas = document.querySelector('#canevas3'); 
	var contexte = canevas.getContext('2d');
	contexte.ellipse(100, 100, 50, 100, 0, 0, 2 * Math.PI);
	contexte.stroke();
	contexte.beginPath();
	contexte.ellipse(300, 300, 100, 50,0, 0, 2 * Math.PI);
	contexte.stroke();
}
fcanevas3();

Tous les paramètres sont identiques sauf rx & ry.
Comme il s'agit d'ellipses complètes le point A vaut zéro et le point B vaut 2 π radians.

Arcs d'ellipse

Le rendu

Rappels mathématiques : un arc d'ellipse est une portion d'ellipse limitée par deux points A et B situés sur le périmètre.

Ci-dessous un document HTML affichant deux arcs d'ellipse dans un canevas.
Les arcs d'ellipse sont deux demi-ellipses mais les points A et B sont différents.

Comme pour les arcs de cercle, les arcs d'ellipse sont dessinés dans le sens des aiguilles d'une montre en partant de la gauche.
Premier arc d'ellipse : point A : Math.PI ; point B : 2*Math.PI
Deuxième arc d'ellispse : point A : 0 ; point B : Math.PI

Le code correspondant

La balise canvas définit un repère cartésien de 400 par 400 et est identifiée "canevas4".
Donc le script qui en découle :

function fcanevas4()
{
	var canevas = ...
	var contexte = ...
	contexte.strokeStyle ="blue";
	contexte.lineWidth =3; 

	contexte.beginPath();
	contexte.ellipse(250,250,100,50,0,Math.PI,2*Math.PI);
	contexte.stroke();

	contexte.beginPath();
	contexte.ellipse(150,150,100,50,0,0, Math.PI);
	contexte.stroke();
}
fcanevas4();