Méthode lineTo() de canvas HTML

Définition et utilisation

lineTo() La méthode pour ajouter un nouveau point, puis créez une ligne de ce point à la dernière position spécifiée sur le canevas (Cette méthode ne crée pas de ligne).

Avis :Utilisez stroke() La méthode dessine l'itinéraire exact sur le canevas.

Exemple

Exemple 1

Commencer un chemin, déplacer à la position 0,0. Créer une ligne atteignant la position 300,150 :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Essayez-le vous-même

Avis :Plus d'exemples sont disponibles en bas de la page.

Grammaire

context.lineTo(X,Y);

Valeur du paramètre

Paramètre Description
X L'abscisse de la position cible du chemin.
Y L'ordonnée Y de la position cible du chemin.

Plus d'exemples

Exemple 2

Tracez un chemin, la forme est la lettre L :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.