Médiaforma

Tracer des lignes dans un Canvas

Print Friendly

Dans cette rubrique, vous allez apprendre à tracer des lignes dans un canevas avec la fonction lineTo(). A titre d’exemple, nous allons tracer un triangle de couleur bleue entouré de bordures de couleur rouge épaisses de 2 pixels. Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript triangle() est exécutée.

Les lignes 13 et 14 récupèrent le contexte du caneva et le stockent dans la variable ctxt.

Les trois instructions suivantes définissent la couleur de la bordure, l’épaisseur de la bordure et la couleur de remplissage.

La fonction beginPath() indique que le tracé va commencer. La fonction moveTo() définit l’abscisse et l’ordonnée du point à partir duquel se fera le tracé.

Les trois instructions suivantes définissent les trois côtés du triangle.

Il ne reste plus qu’à remplir le triangle avec la fonction fill(), à tracer son contour avec la fonction stroke() et à clore le tracé avec la fonction closePath().

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply