Lignes Canvas HTML

实例

// Créer le canevas :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Définir un nouveau chemin :
ctx.beginPath();
// Définir le point de départ :
ctx.moveTo(0, 0);
// Définir le point final :
ctx.lineTo(200, 100);
// Dessiner :
ctx.stroke();

Essayez-le vous-même

Dessin de lignes Canvas

Le dessin des lignes utilise les chemins du canevas :

Méthode

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

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

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

La méthode stroke() dessine effectivement la ligne. La couleur par défaut du trait est noire.

Propriété lineWidth

La propriété lineWidth définit la largeur de la ligne à utiliser pour dessiner sur le canevas.

Il doit être configuré avant d'appeler la méthode stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Essayez-le vous-même

Propriété strokeStyle

La propriété strokeStyle définit le style à utiliser pour dessiner sur le canevas.

Il doit être configuré avant d'appeler la méthode stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Essayez-le vous-même

Propriété lineCap

La propriété lineCap définit le style de la fin de la ligne (bout, arrondi ou carré).

Par défaut, c'est un carré (carré).

Il doit être configuré avant d'appeler la méthode stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Essayez-le vous-même

Veuillez également consulter :

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