Coordonnées du canevas HTML
Coordonnées de la toile
Le canevas HTML est une grille à deux dimensions.
Le coin supérieur gauche de la toile a les coordonnées (0,0)
Dans le chapitre précédent, vous avez vu cette méthode utilisée : fillRect(0,0,150,75).
Cela signifie : Commencez par le coin supérieur gauche (0,0) et dessinez un rectangle de 150x75 pixels.
Exemple de coordonnées
Passez la souris sur le rectangle ci-dessous pour voir ses coordonnées x et y :
Tracer une ligne
Pour tracer une ligne droite sur un canevas, utilisez les méthodes suivantes :
- moveTo( x,y ) - définit le point de départ de la ligne
- lineTo( x,y ) - définit le point final de la ligne
Pour tracer réellement la ligne, vous devez utiliser l'une des méthodes "ink", comme stroke().
Exemple
Définissez un point de départ en position (0,0) et un point d'arrivée en position (200,100). Utilisez ensuite la méthode stroke() pour tracer réellement la ligne :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Dessiner un cercle
Pour dessiner un cercle sur une toile, utilisez les méthodes suivantes :
- beginPath() - commence un chemin
- arc(x,y,r,startangle,endangle) - crée un arc/une courbe. Pour créer un cercle avec arc() : Définissez l'angle de départ sur 0 et l'angle de fin sur 2*Math.PI. Les paramètres x et y définissent les coordonnées x et y du centre du cercle. Le paramètre r définit le rayon du cercle.
Exemple
Définissez un cercle avec la méthode arc(). Utilisez ensuite la méthode stroke() pour dessiner réellement le cercle :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();