Hvordan tømme lerret i JavaScript

Lerretelementet er en beholder for å tegne grafiske fremstillinger i nettleseren. Det er skapt ved å bruke stikkord. Dessuten er det nyttig å fjerne alle elementene på lerretet for å gjenbruke det. JavaScript er et funksjonsrikt programmeringsspråk som gir omfattende funksjonaliteter for å adressere et spesifikt formål. I denne guiden vil vi demonstrere metoden for å tømme lerretet ved hjelp av JavaScript.

Dette innlegget tjener følgende utfall:

• Hvordan bruke ClearRect () -metoden for å fjerne lerret i JavaScript?
• Klar spesifikk del av lerret i JavaScript
• Klar komplett del av lerretet i JavaScript

Hvordan bruke ClearRect () -metoden for å fjerne lerret i JavaScript?

I JavaScript, clearRect () Metoden brukes til å tømme hele eller spesifikke delen av lerretet. Ved siden av denne metoden, må du hente lerretelementet via klassen eller IDen. La oss først se på syntaksen til ClearRect () -metoden:

Syntaks

clearRect (x, y, bredde, høyde);

Parametrene til clearRect () Metoden er som følger:

• x: Angir x-koordinaten til øverste venstre hjørne av rektangelet.
• y: Angir Y-koordinaten til øverste venstre hjørne av rektangelet.
• bredde: representerer bredden på rektangelet for å fjerne (piksler).
• høyde: representerer høyden på rektangelet for å fjerne (piksler).

Eksempel 1: Klar spesifikk del av lerret i JavaScript

Et eksempel vurderes ved å bruke clearRect () Metode for å fjerne spesifikke elementer i nettleservinduet. Følgende kode er atskilt og forklart som Html og JavaScript deler.

HTML -kode

Eksempel på spesifikt del klart lerret

Forklaringen på kode er som følger:

• EN lerret Element er laget med “ID = Can” å ha bredde = ”500" og høyde = ”350".
• En JavaScript -fil er vedlagt ved å sende navnet på filen "test.JS ” til src Egenskap.

JavaScript -kode

var c = dokument.getElementById ("Can");
var ctx = c.getContext ("2d");
CTX.FillStyle = "Black";
CTX.FillRect (0, 0, 500, 350);
CTX.ClearRect (250, 100, 100, 100);

I denne koden:

• For det første getElementById () Metode trekker ut lerretelementet.
• Etter det, getContext () Metoden brukes til å trekke ut tegningskonteksten for å vises i lerret.
• Videre FillReact () Metoden tegner et fylt rektangel ved å passere bredde og høyde argumenter.
• Til slutt, clearReact () fjerner pikslene i det spesifiserte rektangelet.

Produksjon

Utgangen viser at en spesifikk del som er til stede i midten av lerretet blir fjernet i nettleservinduet.

Eksempel 2: Klar komplett lerret i JavaScript

En metode anses å fjerne alle lerretelementene ved å trykke på knappen i JavaScript. Opprinnelig plasseres en grafisk representasjon på lerretet. Etter det, clearRect () Metoden brukes for å fjerne den komplette delen av lerretet.

Ved å vurdere clearRect () Metode, kodestykket er delt inn i HTML- og JavaScript -filer.

HTML -kode

Trykk på knappen for å tømme lerretet rektangel

I denne koden:

• Et lerretelement opprettes ved å tilordne "bredde" av “300” og "høyde" av “180” dimensjoner.
• Etter det er en knapp vedlagt hvis verdi er “Klar knapp”.
• Til slutt JavaScript -kodefilen "test.JS ” er koblet til HTML -filen innen Tagger.

JavaScript -kode

var lerret = dokument.getElementById ('Mycan');
var kontekst = lerret.getContext ('2d');
kontekst.startPath ();
kontekst.Rekt (18, 50, 200, 100);
kontekst.FillStyle = "Black";
kontekst.fylle();
kontekst.LineWidth = "20";
kontekst.hjerneslag ();
dokument.getElementById ('klart').AddEventListener ('klikk', funksjon ()
kontekst.ClearRect (0, 0, lerret.bredde, lerret.høyde);
, falsk);

Kodeforklaringen er skrevet her:

• De getElementById ('Mycan') brukes til å trekke ut lerretelementet ved å gi et argument.
• Etter det, “2D” sendes for å tegne et bilde på en todimensjonal overflate ved å bruke getContext () metode.
• Videre kontekst.reagere() Oppretter et rektangel ved å spesifisere høyder og bredder.
• De FillStyle Eiendom brukes til å spesifisere fargen.
• Etter det, fylle() Metoden brukes for å fylle fargen i et rektangel.
• Til slutt, den kontekst.clearReact () Metoden brukes til å tømme lerretet ved å passere bredde og høyde.

Produksjon

Utgangen returnerer et svartfarget lerret som blir fjernet ved å trykke på “Klar knapp” i vinduet.

Konklusjon

I JavaScript, clearRect () Gir en funksjon for å fjerne lerretelementene ved å spesifisere høyden og bredden. Dette innlegget har forklart arbeids- og bruken av ClearRect () -metoden for å fjerne lerret i JavaScript. For en bedre forståelse anses to eksempler for å fjerne de spesifikke så vel som å fjerne alle deler av lerretet. Metoden er gunstig for tegning, plotting og animasjoner på lerretet.