Accueil

Traduction

Tutoriel Canvas - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Canvas : dessiner des droites et des polygones

Dessiner des droites

Exemple

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 code correspondant

La zone de dessin fait 320 par 200

Le script :

Attention cette page comprend deux éléments "canvas". Il convient donc d'être rigoureux au niveau des script.
Une variable objet pour chaque canevas.

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

Canvas : dessiner des polygones

Exemple

Votre navigateur est obsolète

Le code correspondant

Instruction HTML :

Le script :

Le deuxième élément "canvas" n'ayant pas d'ID, je suis obligé d'utiliser document.querySelectorAll('canvas')[1] pour le référencer.

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" dans ce tuto !