Formes du Canvas HTML

Instance

Exemple 1

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

Essayez-le vous-même

Dessin de lignes Canvas

Les lignes dessinées utilisent les chemins du canevas :

Méthode

beginPath() La méthode commence un nouveau chemin. Elle ne dessine rien, elle ne fait que définir un nouveau chemin.

moveTo() Définir le point de départ de la ligne. Elle ne dessine rien, elle ne fait que définir un point de départ.

lineTo() La méthode définit le point final de la ligne. Elle ne dessine rien, elle ne fait que définir un point final.

stroke() La méthode dessine effectivement des lignes. La couleur de trait par défaut est noire.

Plus d'exemples

Exemple 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Essayez-le vous-même

Exemple 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Essayez-le vous-même

Avis

Si vous souhaitez dessiner un rectangle, vous n'avez pas besoin de dessiner 4 lignes.

Dans le prochain chapitre, vous apprendrez à utiliser drawRect() Méthode pour dessiner un rectangle.

Propriété strokeStyle

strokeStyle Les propriétés définies sont utilisées pour dessiner sur le canevas.

Doit être appelé avant stroke() Définissez-le avant de l'appeler.

Instance

ctx.beginPath();
// Définir un rectangle
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Définir un triangle
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Essayez-le vous-même

Veuillez également consulter :

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