HTML5 - Dessiner sur la toile

La clé pour avoir des structures solides, ce sont les fondations, pour cela nous devons avoir des fondations solides et bien définies, donc afin de pouvoir utiliser l'élément à sa capacité maximale Toile Nous devons d'abord connaître les aspects de base en profondeur et c'est pourquoi nous allons commencer à dessiner des formes de base, avec cela nous apprendrons comment fonctionnent les différentes méthodes de dessin et ensuite nous pourrons faire des compositions plus complexes.
Dessiner un rectangle
Le rectangle est une figure très simple qui se compose de 4 côtés, voyons les méthodes dont nous disposons pour pouvoir le dessiner sur le Canvas :

• clearRect (x, y, w, h): Nettoie un rectangle ou une partie d'un rectangle spécifié précédemment.
• fillRect (x, y, w, h): Utilisé pour dessiner un rectangle rempli.
• strokeRect (x, y, w, h): Utilisé pour dessiner un rectangle sans remplissage.

Comme on l'aura remarqué, les méthodes précédentes utilisent toutes 4 arguments, ces arguments correspondent à ce qui suit :

• x et sont les limites du bord supérieur gauche du rectangle.
• w h correspondent respectivement à la largeur et à la hauteur.

Voyons un exemple simple pour que nous puissions mettre ces éléments en pratique :

 Exemple Votre navigateur ne supporte pas l'élément Toile 

Dans cet exemple, nous voyons que nous définissons certaines variables, où nous disons le décalage ou limiter l'endroit où commenceront les rectangles, la taille puis un nombre de variables qui servira de compteur pour faire les répétitions, nous voyons donc dans la section suivante que nous savons que nous allons créer des rectangles dynamiquement, voyons comment ils sont dessinés dans notre navigateur:

Nous avons fait deux rangées de 5 rectangles chacune, si nous regardons le code que nous avions appelé les méthodes fillRect () d'abord pour les rectangles remplis, puis pour traitRect pour les non farcis.
Utilisation de la méthode clearRect()
Et si on voulait maintenant nettoyer une partie des rectangles remplis ? Pour cela nous avons la méthode effacerRect (), dans le code suivant, nous verrons comment cela fonctionne :

 Exemple Votre navigateur ne supporte pas l'élément Toile 

Pour chaque répétition, nous appliquons un appel à la méthode effacerRect () et lors de l'exécution de l'algorithme, nous l'avons fait parcourir tout le centre des rectangles remplis, voyons dans l'image suivante à quoi cela ressemble dans notre navigateur :

Ici, nous pouvons voir comment nous avons nettoyé une zone que nous avions précédemment dessinée.
Avec cela nous terminons ce tutoriel où nous avons pu voir un peu plus en profondeur certaines méthodes que nous pouvons utiliser pour dessiner dans notre élément Toile.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif