Pour pouvoir dessiner sur le canevas il faut adresser les commandes au "contexte graphique" du canevas,, récupéré par la méthode getGraphicsContext2D.
En clair les commandes de dessin doivent être précédées d'une ligne de type :
GraphicsContext gc=nom_du_canevas.getGraphicsContext2D();(voir l'exemple du chronomètre pour plus de détails).
Dans les explications suivants, chaque commande graphique commence par "gc." pour préciser le fait qu'on dessine dans un contexte graphique qu'on a choisi d'appeler gc.
Les coordonnées (x,y) passées en paramètres aux méthodes de dessin sont toujours de type double.
Par défaut l'origine (0,0) est en haut à gauche (mais on peut la positionner ailleurs en utilisant la commande translate comme montré ici )
Les méthodes permettant de tracer les formes de base se partagent en deux catégories : celles qui commencent par "stroke" et celles qui commencent par "fill".
Celles qui commencent par "stroke" permettent de tracer le contour de la forme, celles qui commencent par "fill" en remplissent l'intérieur.
gc.strokeLine(x1,y1,x2,y2)
gc.strokeRect(x,y,l,h)ou
gc.fillRect(x,y,l,h)x et y sont les coordonnées du point supérieur gauche, l est la largeur et h la hauteur. h et l sont de type double.
La méthode
gc.clearRect(x,y,l,h)prend les mêmes paramètres que strokeRect et fillRect. Elle efface le contenu du canevas contenu dans le rectangle défini.
gc.strokeRoundRect(x,y,l,h,lc,lh)et
gc.fillRoundRect(x,y,l,h,lc,lh)Les paramètres x,y,l,h ont la même signification que dans la méthode strokeRect. Les paramètres lc et lh sont de type double et désignent respectivement la largeur et la hauteur de la ligne courbe utilisée pour fermer les angles.
gc.strokeOval(x,y,l,h)ou
gc.fillOval(x,y,l,h)L'ellipse est inscrite ans un rectangle dont x et y sont les coordonnées du point supérieur gauche, l la largeur et h la hauteur. h et l sont de type double.
gc.strokeArc(x,y,l,h,depart,angle,fermeture)ou
gc.fillArc(x,y,l,h,depart,angle,fermeture)Les paramètres x,y,l,h décrivent l'ellipse à laquelle appartient l'arc, de la même manière que dans la méthode strokeOval.
Exemple : les lignes
gc.fillOval(280, 250, 200, 100); gc.strokeArc(280, 250, 200, 100, 0, 60, ArcType.OPEN); gc.strokeArc(280, 250, 200, 100, 70,40 , ArcType.ROUND); gc.strokeArc(280, 250, 200, 100, 155,50 , ArcType.CHORD);donnent le résultat suivant :
gc.strokePolyline(tx,ty,npoints)permet de tracer une ligne quelconque passant par les points indiqués. les paramètres tx et ty sont des tableaux contenant respectivement, au format double, les abscisses et les ordonnées des points par lesquels doit passer la ligne.
Exemple :
double[] x={150,180,180,200,250,300,250,200}; double[] y={100,50,100,150,130,170,180,200}; gc.strokePolyline(x,y,8);donne
gc.strokePolygon(tx,ty,npoints)et
gc.fillPolygon(tx,ty,npoints)fonctionnent de manière similaire, mais en fermant la ligne entre le premier et le dernier point, pour obtenir un polygone.
Exemple :
double[] x={150,180,180,200,250,300,250,200}; double[] y={100,50,100,150,130,170,180,200}; gc.fillPolygon(x,y,8); gc.strokePolygon(x,y,8); gc.setLineWidth(5); gc.strokePolyline(x,y,5);donne