Comment effacer la toile en javascript

L'élément de toile est un conteneur pour dessiner des représentations graphiques dans le navigateur. Il est créé en utilisant le étiqueter. De plus, il est utile d'effacer tous les éléments de la toile pour le réutiliser. JavaScript est un langage de programmation riche en fonctionnalités qui offre des fonctionnalités étendues pour s'attaquer à un objectif spécifique. Dans ce guide, nous démontrerons la méthode pour effacer la toile à l'aide de JavaScript.

Ce message sert les résultats suivants:

• Comment utiliser la méthode ClearRect () pour effacer Canvas en JavaScript?
• Effacer la partie spécifique de la toile en JavaScript
• Effacer la partie complète de la toile en JavaScript

Comment utiliser la méthode ClearRect () pour effacer Canvas en JavaScript?

En javascript, le ClearRect () La méthode est utilisée pour effacer la partie entière ou spécifique de la toile. Parallèlement à cette méthode, vous devez récupérer l'élément Canvas via sa classe ou l'ID. Tout d'abord, jetons un coup d'œil à la syntaxe de la méthode ClearRect ():

Syntaxe

ClearRect (x, y, largeur, hauteur);

Les paramètres du ClearRect () La méthode est la suivante:

• X: Spécifie la coordonnée x du coin supérieur gauche du rectangle.
• Y: Spécifie la coordonnée y du coin supérieur gauche du rectangle.
• largeur: représente la largeur du rectangle à effacer (pixels).
• hauteur: représente la hauteur du rectangle à effacer (pixels).

Exemple 1: Effacer la partie spécifique de la toile en javascript

Un exemple est considéré en utilisant le ClearRect () Méthode pour supprimer des éléments spécifiques dans la fenêtre du navigateur. Le code suivant est séparé et expliqué comme Html et Javascrip les pièces.

Code HTML

Exemple à une partie spécifique Clear Canvas

L'explication du code est la suivante:

• UN toile L'élément est créé avec «Id = can» ayant largeur = ”500" et hauteur = ”350".
• Un fichier javascript est joint en passant le nom du fichier "test.JS " au SRC attribut.

Code javascript

var c = document.getElementById ("peut");
var ctx = c.getContext ("2d");
ctx.fillstyle = "noir";
ctx.Fillrect (0, 0, 500, 350);
ctx.ClearRect (250, 100, 100, 100);

Dans ce code:

• Premièrement, le getElementByid () la méthode extrait l'élément de toile.
• Après cela, le getContext () La méthode est utilisée pour extraire le contexte de dessin à afficher en toile.
• De plus, le fillreact () La méthode attire un rectangle rempli en passant largeur et hauteur arguments.
• À la fin, ClearReact () Supprime les pixels dans le rectangle spécifié.

Sortir

La sortie montre qu'une partie spécifique qui est présente au centre de la toile est effacée dans la fenêtre du navigateur.

Exemple 2: Effacer la toile complète en JavaScript

Une méthode est considérée pour effacer tous les éléments de la toile en appuyant sur le bouton en javascript. Initialement, une représentation graphique est placée sur la toile. Après cela, le ClearRect () La méthode est utilisée pour effacer la partie complète de la toile.

En considérant le ClearRect () Méthode, le morceau de code est divisé en fichiers html et javascript.

Code HTML

Appuyez sur le bouton pour effacer le rectangle de la toile

Dans ce code:

• Un élément de toile est créé en attribuant "largeur" de «300» et "hauteur" de «180» dimensions.
• Après cela, un bouton est attaché dont la valeur est "Bouton effacer".
• En fin de compte, le fichier de code javascript "test.JS " est lié au fichier html à l'intérieur Mots clés.

Code javascript

var toile = document.getElementByid («myCan»);
Var Context = toile.getContext ('2d');
contexte.BeginPath ();
contexte.RECT (18, 50, 200, 100);
contexte.fillstyle = "noir";
contexte.remplir();
contexte.lineWidth = "20";
contexte.accident vasculaire cérébral();
document.GetElementByid («clair»).addEventListener ('click', function ()
contexte.ClearRect (0, 0, toile.largeur, toile.hauteur);
, FAUX);

L'explication du code est écrite ici:

• Le getElementbyid ('mycan') est utilisé pour extraire l'élément de toile en passant un argument.
• Après cela, le "2d" est passé pour dessiner une image sur une surface bidimensionnelle en utilisant le getContext () méthode.
• De plus, le contexte.réagir() crée un rectangle en spécifiant le hauteurs et largeurs.
• Le gibier la propriété est utilisée pour spécifier la couleur.
• Après cela, le remplir() La méthode est utilisée pour remplir la couleur dans un rectangle.
• En fin de compte, le contexte.ClearReact () La méthode est utilisée pour effacer la toile en passant la largeur et la hauteur.

Sortir

La sortie renvoie une toile de couleur noire qui est effacée en appuyant sur le "Bouton effacer" dans la fenêtre.

Conclusion

En javascript, ClearRect () Fournit une fonctionnalité pour effacer les éléments de toile en spécifiant la hauteur et la largeur. Ce message a expliqué le travail et l'utilisation de la méthode ClearRect () pour effacer la toile en JavaScript. Pour une meilleure compréhension, deux exemples sont considérés pour supprimer les spécifiques et effacer toutes les parties de la toile. La méthode est bénéfique pour redessiner, tracer et animations sur la toile.