Accueil

Tutoriel Canvas - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Canvas : cercles et arcs de cercle

Cercles

Affichez la console JavaScript pour cette page !

Le code correspondant

Code HTML

<canvas width = '200' height = '200'></canvas>

Ne pas oubliez la balise NOSCRIPT dans la partie HEAD !

Le script

Je remplace désormais dans mes scripts, les instructions "alert" par des instructions "console.log".
Gros avantage : ces instructions 'nont pas être supprimées dès que le script est validé car elles ne sont visibles pour l'internaute que s'il affiche la console JavaScript.

	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ;
	var Y = canevas.height ; 
	console.log(X + " " +typeof(X));
	console.log(Y + " " +typeof(Y));
	contexte.arc(X/4, Y/4, X/4, 0, Math.PI*2); 
	contexte.fillStyle	 ='yellow'; 
	contexte.fill(); 
	// deuxième cercle 
	contexte.arc(X/2, Y/2, X/4, 0, Math.PI*2); 
	contexte.lineWidth= 5; 
	contexte.strokeStyle = 'orange'; 
	contexte.stroke(); 

Si ce script est interne à la page, il doit être contenu dans la balise SCRIPT !

La console retourne deux fois "200 number". Donc nous pouvons utiliser directement ces valeurs pour positionner et dessiner les formes !

Dans l'exemple les coordonnées du centre et le rayon des cercles sont exprimées en fonction de X et Y (dimensions du Canvas). Donc si vous changez les dimensions de la zone de dessin (attributs width & height de la balise canvas) vous n'aurez rien à changer dans le code JavaScript. Pratique, n'est-ce pas !

Il y a cependant un gros bug dans notre code ! Il y a en effet il existe un segment disgracieux entre les deux cercles ! La raison est simple : nous avons oublié de "lever le crayon" entre les deux cercles !

Pour avoir un code correct il faut insérer une instruction juste avant "contexte.arc()" du deuxième cercle :
contexte.beginPath() ; // début d'un nouveau chemin Consultez le dessin correct

La méthode arc()

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

Les deux derniers paramètres doivent être exprimés en radians (sans préciser l'unité de mesure).
Les autres paramètres sont exprimés en pixels (toujours sans préciser l'unité) sous forme d'une constante ou d'une variable retournant un "number".

Un cercle complet c'est un arc de cercle de 0 à 2 π radians. L'unité de mesure (radian) est implicite et ne doit pas être précisée.
En JavaScript, pour désigner la constante π ("pi") on utilise : Math.PI) (propriété PI de l'objet Math).

Arcs de cercle

Ci-dessous un canevas comprenant deux demi-cercles remplis par une couleur orange.

Code correspondant

HTML

<canvas width = '150' height ='100'></canvas>

Le script

	canevas2 = document.querySelectorAll('canvas')[1]; 
	contexte2 = canevas2.getContext('2d');
	X2 = canevas2.width ; 		
	Y2 = canevas2.height ; 
	console.log(X2 + " " +typeof(X2));
	console.log(Y2 + " " +typeof(Y2));
	contexte2.fillStyle ='orange'; 
	contexte2.beginPath(); 
	contexte2.arc(X2/3, Y2/2, X2/6, 0, Math.PI); 
	//premier demi cercle
	contexte2.fill(); 
	contexte2.arc(X2/3*2, Y2/2, X2/6, Math.PI, Math.PI*2); 
	//deuxième demi-cercle
	contexte2.fill(); 

La variable canevas2 référence le deuxième élément CANVAS de la page (indice 1 ; le premier a l'indice 0).
Pour dessiner un arc de cercle il faut également utiliser la méthode arc().
Par défaut les arcs de cercle sont dessinés dans le sens inverse des aiguilles d'une montre.
Le schéma ci-dessus vous aide à déterminer l'angle de départ et l'angle d'arrivée.

Ce schéma vous indique que le point 0 est aussi le point 2π (radians).
Ainsi pour dessiner le premier demi cercle : angle de départ = 0 ; angle d'arrivée = 1π
Et pour dessiner le deuxième demi cercle : angle de départ = 1π ; angle d'arrivée = 2π

Canevas non responsives

Sur un écran d'ordinateur ces canevas apparaissent ridiculement petits car ils sont conçus pour l'affichage sur un smartphone.
Mais rassurez vous, je vous indiquerai bientôt comment rendre les canevas "responsives" (s'affichant correctement sur tous les écrans).