Traduction
Tutoriel Canvas - sommaire
Tutoriel Canvas - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous devrez afficher pour cette page la console du navigateur car les scripts contiennent des instructions provisoires de type "console.log(...)"
Un canevas avec deux cercles :
Rappel : ne pas oublier la balise NOSCRIPT dans la partie HEAD !
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.
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.
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.
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 canevas fait 300 par 200.
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.
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".
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.
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.
Remarque : canevas est identifié "canevas3" dans l'instruction HTML.
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).
Pour produire des ellipses ou arcs d'ellipse il faut utiliser la méthode ellipse avec 7 paramètres !
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).
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 :
Info : le canevas fait 400 par 300 et est identifié "canvas4".
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.
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).