Come cancellare la tela in javascript

L'elemento tela è un contenitore per disegnare rappresentazioni grafiche nel browser. È creato utilizzando il etichetta. Inoltre, è utile cancellare tutti gli elementi della tela per riutilizzarla. JavaScript è un linguaggio di programmazione ricco di funzionalità che fornisce ampie funzionalità per affrontare uno scopo specifico. In questa guida, dimostreremo il metodo per cancellare la tela usando JavaScript.

Questo post serve i seguenti risultati:

• Come utilizzare il metodo ClearRect () per cancellare la tela in JavaScript?
• Porzione chiara specifica di tela in JavaScript
• Clear completa porzione di tela in javascript

Come utilizzare il metodo ClearRect () per cancellare la tela in JavaScript?

In JavaScript, il ClearRect () Il metodo viene utilizzato per cancellare l'intera o la parte specifica della tela. Accanto a questo metodo, è necessario recuperare l'elemento tela tramite la sua classe o l'ID. Innanzitutto, diamo un'occhiata alla sintassi del metodo ClearRect ():

Sintassi

clearrect (x, y, larghezza, altezza);

I parametri del ClearRect () Il metodo è il seguente:

• X: Specifica la coordinata X dell'angolo in alto a sinistra del rettangolo.
• y Specifica la coordinata Y dell'angolo in alto a sinistra del rettangolo.
• larghezza: rappresenta la larghezza del rettangolo per eliminare (pixel).
• altezza: Rappresenta l'altezza del rettangolo a Clear (pixel).

Esempio 1: chiara porzione specifica della tela in JavaScript

Un esempio è considerato impiegando il ClearRect () Metodo per rimuovere elementi specifici nella finestra del browser. Il seguente codice è separato e spiegato come Html E JavaScript parti.

Codice HTML

Esempio di porzione specifica Clear Canvas

La spiegazione del codice è la seguente:

• UN tela L'elemento è creato con "Id = Can" avendo larghezza = "500" E altezza = "350".
• Un file JavaScript è allegato passando il nome del file "test.JS " al src attributo.

Codice JavaScript

var c = documento.getElementById ("can");
var ctx = c.getContext ("2D");
CTX.FillStyle = "Black";
CTX.fillerct (0, 0, 500, 350);
CTX.ClearRect (250, 100, 100, 100);

In questo codice:

• In primo luogo, il getElementById () Il metodo estrae l'elemento tela.
• Dopodiché, il getContext () Il metodo viene utilizzato per estrarre il contesto di disegno da visualizzare in tela.
• Inoltre, il fillreact () Il metodo disegna un rettangolo pieno passando larghezza E altezza argomenti.
• Alla fine, clearreact () Rimuove i pixel nel rettangolo specificato.

Produzione

L'uscita mostra che una parte specifica presente al centro della tela viene cancellata nella finestra del browser.

Esempio 2: cancella la tela completa in javascript

È considerato un metodo per cancellare tutti gli elementi di tela premendo il pulsante in JavaScript. Inizialmente, una rappresentazione grafica è posizionata sulla tela. Dopodiché, il ClearRect () Il metodo viene impiegato per cancellare la parte completa della tela.

Considerando il ClearRect () Metodo, il pezzo di codice è diviso in file HTML e JavaScript.

Codice HTML

Premere il pulsante per cancellare il rettangolo di tela

In questo codice:

• Un elemento tela viene creato assegnando "larghezza" Di "300" E "altezza" Di "180" dimensioni.
• Successivamente, un pulsante è allegato il cui valore è "Cancella pulsante".
• Alla fine, il file del codice JavaScript "test.JS " è collegato al file HTML all'interno tag.

Codice JavaScript

var canvas = document.getElementById ('mycan');
var context = tela.getContext ('2D');
contesto.inizioPath ();
contesto.Rect (18, 50, 200, 100);
contesto.FillStyle = "Black";
contesto.riempire();
contesto.linewidth = "20";
contesto.colpo();
documento.getElementById ('Clear').addEventListener ('click', function ()
contesto.ClearRect (0, 0, tela.larghezza, tela.altezza);
, false);

La spiegazione del codice è scritta qui:

• IL getElementById ('mycan') viene utilizzato per estrarre l'elemento di tela passando un argomento.
• Dopodiché, il "2d" viene passato per disegnare un'immagine su una superficie bidimensionale usando il getContext () metodo.
• Inoltre, il contesto.reagire() crea un rettangolo specificando il altezza E larghezze.
• IL Fillstyle La proprietà viene utilizzata per specificare il colore.
• Dopodiché, il riempire() Il metodo viene impiegato per riempire il colore in un rettangolo.
• Alla fine, il contesto.clearreact () Il metodo viene utilizzato per cancellare la tela passando larghezza e altezza.

Produzione

L'uscita restituisce una tela di colore nero che viene cancellata premendo il "Cancella pulsante" nella finestra.

Conclusione

In JavaScript, ClearRect () Fornisce una funzione per cancellare gli elementi di tela specificando l'altezza e la larghezza. Questo post ha spiegato il lavoro e l'uso del metodo ClearRect () per cancellare la tela in JavaScript. Per una migliore comprensione, sono considerati due esempi per rimuovere le parti specifiche e chiare tutte le parti della tela. Il metodo è vantaggioso per la ridisegnazione, la trama e le animazioni sulla tela.