Coordonnées HTML Canvas

Coordonnées du canevas

Le canevas HTML est un réseau bidimensionnel.

Les coordonnées du coin supérieur gauche du canevas sont (0,0).

Dans le chapitre précédent, nous avons utilisé la méthode : fillRect(0,0,150,75).

Cela signifie : dessiner un rectangle de 150x75 pixels à partir du coin supérieur gauche (0,0).

Exemple de coordonnées

Placez le curseur sur le rectangle suivant pour voir ses coordonnées x et y :

Dessiner une ligne

Pour dessiner une ligne droite sur le canevas, utilisez les méthodes suivantes :

• moveTo(x,y) - Définir le début de la ligne
• lineTo(x,y) - Définir la fin de la ligne

Pour dessiner une ligne réellement, vous devez utiliser l'une des méthodes de "peinture", par exemple stroke().

Exemple

Définir le point de départ (0,0) et le point d'arrivée (200,100). Ensuite, dessiner la ligne réellement en utilisant la méthode stroke().

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Essayez-le vous-même

Dessiner un cercle

Pour dessiner un cercle sur le canevas, utilisez les méthodes suivantes :

• beginPath() - Commencer un chemin
• arc(x,y,r,startangle,endangle) - Créer un arc/courbe

Pour créer un cercle avec arc() : réglez l'angle de départ à 0 et l'angle de fin à 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éfinir un cercle en utilisant la méthode arc(). Ensuite, dessiner le cercle réellement en utilisant la méthode stroke().

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Essayez-le vous-même

Veuillez également consulter :

Manuel complet de référence Canvas de CodeW3C.com