Tutoriel Canvas - sommaire

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

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

Dessiner des cercles et arcs de cercle

Un canevas avec deux cercles :

Le code correspondant

Code HTML

Rappel : ne pas oublier 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 n'ont 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.

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 existe 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 suffit d'insérer une instruction juste avant "contexte.arc()" du deuxième cercle :
contexte.beginPath() ; // début d'un nouveau chemin

Ci-dessous le dessin correct dans un Iframe.

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)

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é) sous forme d'une constante OU d'une variable retournant un "number".

Pour 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 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 un canevas comprenant deux demi-cercles remplis par une couleur orange.

Le script

Le canevas fait 300 par 200. 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 cible le deuxième élément CANVAS de la page (indice 1, le premier canevas ayant l'indice 0).
Pour dessiner un arc de cercle il faut également utiliser la méthode arc().

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

Travaux pratiques

Lorque l'angle formé par les points AOB (avec O centre du cercle) est inférieur à 180° il y a deux façons de remplir cet arc de cercle :
• segment de cercle : arc rempli jusqu'à une corde (segment) reliant les deux points A et B
• secteur de cercle : arc rempli jusqu'à la ligne brisée A0B

La méthode fill() appliquée à un arc de cercle produit des "segments de cercle".
Pour réaliser des "secteurs de cercle" c'est un peu plus compliqué ...

Ci-dessous deux "segments de cercle" (arcs remplis jusqu'à la corde) :

Les deux segments de cercle sont inscrits dans le même angle (1,5 π radians) mais avec des points de départ et d'arrivée différents.
En utilisant le schéma ci-dessus vous devez être capable de reconstituer le script.

Ellipses et arcs d'ellipse

Dessiner des éllipses

Ci-dessous un canevas avec deux ellipses complètes.

La méthode ellipse est récente et n'est pas encore implémentée sur tous les navigateurs.
Je présente plus loin une aolutin alernative.

Le script

Remarque : canevas est identifié "canevas3" dans l'instruction HTML. var canevas3 = document.querySelector('#canevas3'); var ctx3 = canevas3.getContext('2d'); ctx3.ellipse(100, 100, 50, 100, 0, 0, 2 * Math.PI); ctx3.stroke(); ctx3.beginPath(); ctx3.ellipse(300, 300, 100, 50, 0, 0, 2 * Math.PI); ctx3.stroke();

Pour les deux ellipses la rotation est zéro.
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 (comme pour un cercle complet).

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 : rotation pour cette ellipse, exprimée en radians (ou zéro)
• point A (exprimé en radians)
• point B (exprimé en radians)

Arcs d'ellipse

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 deux ellipses avec rotation et deux arcs d'ellipse.
Les arcs d'ellipse sont des demi-ellipses mais les points A et B sont différents.

A vous de déterminer pour chaque forme : la rotation, les points A et B.
Comme pour les arcs de cercle, les arcs d'ellipse sont dessinés dans le sens des aiguilles d'une montre en partant de l'est.
La rotation fait aussi référence par rapport à l'est ; la première ellipse a une rotation de 45° et la deuxième de 135° (à exprimer en radians, bien sûr).

Dessiner une éllipse - ancienne méthode

Mais au fait comment faisait-on pour réaliser une ellipse alors que la méthode du même nom n'existait pas encore dans la librairie Canvas ?
Et bien on utilisait les méthodes arc() & scale(x,y).
La méthode scale(x,y) crée un changement d'échelle ; voir le chapitre "transformations".

Ci- dessous une belle ellipse réalisée selon l'ancienne méthode :

Le script

Info : le canevas fait 400 par 300 et est identifié "canvas4". function ellipse() { var canevas = document.getElementById("canvas4"); var contexte = canevas.getContext("2d"); contexte.lineWidth=3; contexte.strokeStyle="olive"; contexte.scale(1, 0.5); contexte.beginPath(); contexte.arc(200, 200, 180, 0, 2 * Math.PI); contexte.stroke(); } ellipse(); // appel fonction

Notez l'instruction contexte.scale(1, 0.5) afin que l'ellipse soit deux fois plus large que haute.

Dans la fonction, je peux réutiliser le terme "canevas" pour désigner une variable puisqu'il s'agit alors d'une variable locale (spécifique à la fonction).

Dès qu'une page web contient plusieurs canevas, il est préférable de définir une fonction de dessin par canevas. Ainsi vous pourrez utiliser dans chaque fonction les mêmes termes pour référencer les variables locales : canevas, contexte, etc.

Des canevas non responsives

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