Des polygones avec Canvas

Votre navigateur est obsolète

Le script (extrait)

La zone de dessin fait 300 par 300

... var X = canevas.width ; var Y = canevas.height; contexte.lineWidth = 14 ; // épaisseur du contour dans les deux formes // première forme : triangle contexte.moveTo(20, Y-20); contexte.lineTo(X/2, 20); contexte.lineTo(X-20,Y-20); contexte.closePath() ; // fermer la forme contexte.strokeStyle ='red'; contexte.lineJoin = 'bevel'; contexte.stroke(); // dessiner contour de la forme contexte.beginPath(); //nouvelle forme : un quadrilatère contexte.moveTo(100,50); contexte.lineTo(250,50); contexte.lineTo(200, 250); contexte.lineTo(50,250); // pas de closePath contexte.strokeStyle ='green'; contexte.lineJoin = 'round'; contexte.stroke() ; // dessiner contour de la forme ...

Commentaire du code

On utilise les méthodes moveTo(x,y) et lineTo(x,y) pour dessiner des polygones. Mais pour chaque polygone il y a une instruction moveTo et plusieurs instructions lineTo !

Remarquez que pour dessiner un triangle il n'y a que deux instructions lineTO et que pour dessiner un quadrilatère il n'y a que trois instructions lineTO.
La méthode closePath relie le dernier et le premier point !

Donc si vous souhaitez une forme ouverte il ne faut surtout pas d'instruction contexte.closePath !
C'est ce que j'ai fait pour le quadrilatère.

La propriété lineJoin permet de définir le style des angles la forme.
Les différentes valeurs de cette propriété sont : round(angles arrondis), miter(valeur par défaut), bevel (biseauté). Retour menu