HTML5 Canvas - 2.0 Dessiner, remplir et effacer des rectangles

Les rectangles sont parmi les formes les plus simples à dessiner sur un canevas. Cette leçon présente quatre méthodes : rect, fillRect, strokeRect et clearRect. Chacune produit un résultat différent, du simple tracé jusqu'à l'effacement d'une zone. Nous les testons l'une après l'autre dans la page.

Les trois façons de dessiner un rectangle

La méthode rect dessine un rectangle à partir de sa position et de ses dimensions. C'est la première façon présentée dans la vidéo.

La méthode fillRect remplit l'intérieur du rectangle. Elle produit donc un rectangle plein, contrairement à la méthode précédente.

La méthode strokeRect dessine seulement le contour, sans l'intérieur. La vidéo montre une bordure rouge obtenue avec la couleur de trait strokeStyle. Les réglages vus dans les leçons précédentes, comme la jointure, changent aussi l'aspect du contour.

Effacer une zone avec clearRect

La méthode clearRect agit comme une gomme. Le rectangle efface ce qui se trouve dans sa zone, sans rien dessiner.

Dans la vidéo, un rectangle placé sur toute la toile efface tout le dessin. Selon l'endroit et la taille du rectangle, seule la zone choisie disparaît.

En résumé

Les quatre méthodes couvrent les besoins de base. rect et strokeRect dessinent un contour, fillRect remplit la zone, et clearRect efface. Le choix dépend du résultat voulu. Testez chacune pour voir la différence avant de combiner plusieurs formes.

Points clés

• rect permet de dessiner un rectangle, comme première méthode.
• fillRect remplit l'intérieur du rectangle.
• strokeRect dessine seulement le contour.
• clearRect efface la zone choisie, comme une gomme.
• La position et la taille du rectangle déterminent la zone effacée.

Questions fréquentes

Quelle différence entre fillRect et strokeRect ?

fillRect remplit l'intérieur du rectangle, alors que strokeRect ne dessine que le contour.

Pourquoi un rectangle peut-il tout effacer ?

Si le rectangle couvre toute la toile, il efface tout ce qui était dessiné. Un rectangle plus petit n'efface que la zone qu'il couvre.

Quand utiliser clearRect ?

Utilisez-la pour retirer une partie du dessin sans toucher au reste de la toile.