Tracer un dessin dans une surface donnée dite « toile »
(0,0)
(800,400)
Modifier la trajectoire de la ligne
Cliquez sur le bouton pour dessiner votre ligne sur la toile.
Explication du code
- Créer la toile (<canvas>), lui donner une dimension (width = » » height= » ») et une bordure.
- Introduire les variables x1, y1; x2, y2; x3, y3; x4, y4.
- Récupérer les variables ( document.getElementById )
- Récupérer la variable activer par la fonction (myFunction)
- Définir le contexte 2d par la variable ctx
- Définir le style de la ligne, dans notre exemple bleue (strokeStyle = « blue »)
- Définir l’intérieur du dessin, dans notre exemple rouge (fillStyle = « red »)
- Définir la forme du join, dans notre exemple rond (lineJoin = « round »)
- Définir l’épaisseur du trait (lineWidth = « 5 »)
- Demander au programme de commencer (beginPath());
- Définir le point de départ (moveTo)
- Définir le point d’arrivée (lineTO)
- Demander au programme de terminer (closePath());
- Arrêter la ligne (stroke)
- Stopper le remplissage