Canvas : cercles et arcs de cercle

Cercles

Affichez la console JS pour cette page !

Le script de la page

	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(); 

Commentaire du script

La console retourne deux fois "200 number". Donc nous pouvons utiliser directement ces valeurs pour 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 et height de la balise canvas) vous n'aurez rien à changer dans le code JavaScript. Pratique, n'est-ce pas !

Pour dessiner un arc de cercle voire un cercle il faut utiliser la méthode arc.

L'unité de mesure (radian) est implicite et ne doit pas être précisée.
En JavaScript, pour désigner la constante π on utilise la propriété PI de l'objet Math : Math.PI

Il y a cependant un gros bug dans notre code ! Il y a en effet 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

Si vous zoomez la page à 500% vous constatez l'effet "crénelage" (ou effet "escalier").C'est l'inconvénient des images matricielles. Mais il y a une solution pour avoir un rendu correct ...

Arcs de cercle

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

Le script correspondant

La zone de dessin de ce deuxième canevas fait 150 par 100.

		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(); 

Commentaire du script

Rappel : pour dessiner un arc de cercle il faut 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.
Sur ce schéma le point 0 est aussi le point 2 (2 π radians).

Ainsi pour dessiner le premier demi cercle : angle de départ : 0 et angle d'arrivée 1 π radians (Math.PI)
Et pour dessiner le deuxième demi cercle : angle de départ : 1 π radian (Mat.PI) et angle d'arrivée : 2 π radians (Math.PI*2)

Comme dans le canevas précédent les coordonnées du centre et le rayon de chaque demi-cercle sont exprimées en fonction des dimensions du canevas. Donc même si vous modifiez les dimensions de cette zone dessin le script n'a pas à être modifié.

Peu de méthodes

On peut regretter que certaines méthodes n'existent pas.
Pour dessiner un cercle ou arc de cercle il faut d'abord le définir (arc()) et ensuite le colorier : fill() ou stroke()
Alors que pour les rectangles il existe des méthodes qui font les deux : fillRect(), strokeRect()
Retour menu