Traduction
Tutoriel Canvas - sommaire
Tutoriel Canvas - recherche
L'auteur : Patrick Darcheville
Vous devrez afficher pour cette page la console du navigateur car les scripts
contiennent des instructions provisoires de type "console.log(...)"
Cette page comprend quatre éléments CANVAS.
HTML : le canevas fait 200 par 200.
Rappel : ne pas oublier la balise NOSCRIPT dans la partie HEAD !
le 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 : un segment disgracieux entre les deux cercles !
Pour avoir un code correct il suffit d'insérer une instruction juste avant "contexte.arc()" du deuxième cercle :
Ci-dessous le dessin correct :
Pour dessiner un cercle (ou un arc de cercle) il faut utiliser la méthode arc().
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.
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 convertir des degrés en radians, vous pouvez utiliser l'expression suivante : radians = Math.PI/180 * degres.
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 canevas fait 300 par 200.
Le script :
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.
Le schéma ci-dessous vous indique que le point 0 est aussi le point 2π (radians).
La méthode fill() appliquée à un arc de cercle produit des "segments de cercle".
Ci-dessous un document HTML avec 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.
La méthode ellipse() est récente et n'est pas encore implémentée sur tous les navigateurs.
Je présente plus loin dans le chapitre une solution alernative.
Pour produire des ellipses ou arcs d'ellipse il faut utiliser la méthode ellipse avec 7 paramètres !
Huitième argument facultatif : Un Boolean optionnel qui s'il vaut true dessine l'ellipse dans le sens antihoraire,
sinon dans le sens horaire.
Ci-dessous le troisième canevas de la page avec deux ellipses complètes.
Tous les paramètres sont identiques sauf rx & ry.
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.
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.
Je rappelle qu'il se peut que la nouvelle méthode ellipse() ne soit pas implémentée par votre navigateur.
Ci- dessous une belle ellipse réalisée selon l'ancienne méthode (quatrième canevas de la page) :
Le canevas fait 400 par 300 et est identifié "canevas4".
La fonction JS :
Notez l'instruction contexte.scale(1, 0.5) afin que l'ellipse soit deux fois plus large que haute : changement
d'échelle pour l'axe Y donc les rayons de l'ellipse sont 180 et 90.
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).
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Canvas : dessiner cercles, ellipses et arcs (de cercle ou d'ellipse)
Bien organiser le code
Ils sont identifiés (attribut ID) : canevas1, canevas2, ..., canevas4.
Pour remplir chaque zone de dessin Canvas il y a une fonction. Les fonctions se nomment : fcanevas1, fcanevas2, ..., fcanevas4
Dans chaque fonction j'utilise les mêmes termes pour désigner les variables locales : canevas, contexte, X, Y.
Cette page comprend aussi des Iframes pour intégrer d'autres documents HTML.
Dessiner des cercles et arcs de cercle
Premier canevas de la page : deux cercles
Le code correspondant
function fcanevas1()
{
var canevas = document.querySelector('#canevas1');
var contexte = canevas.getContext('2d');
// dimensions du canevas
var X = canevas.width ;
var Y = canevas.height ;
console.log(X + " " +typeof(X));
console.log(Y + " " +typeof(Y));
// premier cercle
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();
}
fcanevas1();
La raison est simple : nous avons oublié de "lever le crayon" entre les deux cercles !
contexte.beginPath() ; // début d'un nouveau chemin
La méthode arc()
Il faut passer cinq paramètres : x, y, r, angle départ, angle fin :
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 désigner la constante π dans le script on utilise : Math.PI) (propriété PI de l'objet Math).
Dessiner des arcs de cercle
Le code
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();
Comment préciser les point de départ et d'arrivée de l'angle ?
Exercice
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 :
Pour réaliser des "secteurs de cercle" c'est un peu plus compliqué ...
En utilisant le schéma ci-dessus vous devez être capable de reconstituer le script.
Extrait du script :
...
contexte.arc(X/4, Y/4, X/4, 0, Math.PI*1.5);
...
contexte.beginPath() ;
contexte.arc(X/4*3, Y/4*3, X/4, Math.PI *.5, Math.PI*2);
..
Ellipses et arcs d'ellipse
Paramétrer la méthode ellipse
Les paramètres de la méthode sont dans l'ordre :
Dessiner des ellipses
Le canevas identifié "canevas3" fait 400 par 400.
Le script :
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();
Comme il s'agit d'ellipses complètes le point A vaut zéro et le point B vaut 2 π radians.
Arcs d'ellipse
Les arcs d'ellipse sont deux demi-ellipses mais les points A et B sont différents.
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
Dessiner une ellipse - solution ancienne
Et bien il faut alors combiner les méthodes arc() & scale(x,y).
La méthode scale(x,y) crée un changement d'échelle ; voir le chapitre "transformations".
Le code correspondant
function fcanevas4()
{
var canevas = document.getElementById("canevas4");
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();
}
fcanevas4();
Des canevas non responsives