30 Jan 2020

Tracer une ligne

by | posted in: canvas | 0

Exemple

var c = document.getElementById(« myCanvas »);
var ctx = c.getContext(« 2d »);
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Essayez-le vous-même

Tracer la trajectoire d’une ligne dans une surface donnée dite « toile »

(0,0)


Votre navigateur ne supporte pas le HTML5 canvas tag.

(800,400)

Modifier la trajectoire de la ligne

Entrez la variable c :

Entrez les variables de départ x1 et y1

x1 :

y1 :

Entrez les variables d’arrivée x2 et y2

x2 :

y2 :

Cliquez sur le bouton pour dessiner votre ligne sur la toile.

Explication du code

  1. Créer la toile (<canvas>), lui donner une dimension (width = » » height= » ») et une bordure.
  2. Introduire les variables x1, y1, x2, y2.
  3. Récupérer les variables ( document.getElementById )
  5. Récupérer la variable activer par la fonction (myFunction)
  6. Définir le contexte 2d par la variable ctx
  7. Définir le style de la ligne, dans notre exemple bleue (strokeStyle = « blue »)
  8. Définir le point de départ (moveTo)
  9. Définir le point d’arrivée (lineTO)
  10. Arrêter la ligne (stroke)

Document suivant : Tracer une courbe