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é).

Il n'y a pas plus simple ???

Vous devez vous dire que c'est beaucoup de code pour dessiner de simples polygones.
Rassurez vous. L'API Canvas vient d'être notablement améliorée. Il est possible désormais de dessiner une forme complexe en une seule instruction ! Mais je n'en dis pas plus. Visitez la page "Le constructeur de formes Path2D" !
Retour menu