Des lignes avec Canvas

On a dessiné deux croix. La première est verte et chaque ligne a une largeur de 10px. La deuxième est rouge et chaque ligne a une largeur de 16px ; Dans la deuxième croix les extrémités de chaque ligne sont arrondies.

Le script (extraits)

Je n'indique plus les instructions pour affecter une valeur aux variables canevas et contexte puique c'est toujours pareil.

La zone de dessin fait 320 par 200

... // définir première croix contexte.lineWidth = 10 ; contexte.strokeStyle ='green'; contexte.moveTo(30, 30); contexte.lineTo(170, 170); contexte.moveTo(170,30); contexte.lineTo(30,170); // dessiner la première croix contexte.stroke() ; // définir deuxième croix contexte.beginPath(); contexte.lineWidth = 16 ; contexte.strokeStyle ='red'; contexte.lineCap ='round' ; contexte.moveTo(230, 30); contexte.lineTo(300, 170); contexte.moveTo(300,30); contexte.lineTo(230,170); // dessiner la croix contexte.stroke() ; ...

Commentaire du code

La propriété lineCap permet de définir le style des extrémités de chaque ligne.
Les différentes valeurs de cette propriété sont : round (ajout d'un demi cercle à chaque extrémité) , butt(valeur par défaut), square (ajout d'un carré à chaque extrémité).
Retour menu