Jak wyczyścić płótno w JavaScript

Element na płótnie to pojemnik do rysowania graficznych reprezentacji w przeglądarce. Jest tworzony poprzez wykorzystanie etykietka. Ponadto warto usunąć wszystkie elementy płótna. JavaScript to język programowania bogatego w funkcje, który zapewnia obszerne funkcje w celu rozwiązania określonego celu. W tym przewodniku zademonstrujemy metodę wyczyszczenia płótna za pomocą JavaScript.

Ten post serwuje następujące wyniki:

• Jak użyć metody ClearRect () do wyczyszczenia płótna w JavaScript?
• Jasna określona część płótna w JavaScript
• Wyczyść kompletną część płótna w JavaScript

Jak użyć metody ClearRect () do wyczyszczenia płótna w JavaScript?

W JavaScript, clearRect () Metoda stosuje się do wyczyszczenia całej lub określonej części płótna. Oprócz tej metody musisz pobrać element płótna za pomocą jego klasy lub identyfikatora. Najpierw rzućmy okiem na składnię metody ClearRect ():

Składnia

ClearRect (x, y, szerokość, wysokość);

Parametry clearRect () Metoda jest następująca:

• X: Określa współrzędne X górnego lewego rogu prostokąta.
• y: Określa współrzędne Y górnego lewego rogu prostokąta.
• szerokość: reprezentuje szerokość prostokąta do wyczyszczenia (piksele).
• wysokość: reprezentuje wysokość prostokąta do wyczyszczenia (piksele).

Przykład 1: Wyczyść określoną część płótna w JavaScript

Przykład jest rozważany przez zastosowanie clearRect () metoda usuwania określonych elementów w oknie przeglądarki. Poniższy kod jest oddzielony i wyjaśniony jako Html I JavaScript Części.

Kod HTML

Przykład określonej części przezroczystego płótna

Wyjaśnienie kodu jest następujące:

• A płótno element jest tworzony z „Id = can” mający szerokość = ”500” I height = ”350”.
• Plik JavaScript jest dołączany przez przekazanie nazwy pliku "test.JS ” do src atrybut.

Kod JavaScript

var c = dokument.getElementById („can”);
var ctx = c.getContext („2d”);
CTX.FillStyle = „czarny”;
CTX.FillRect (0, 0, 500, 350);
CTX.ClearRect (250, 100, 100, 100);

W tym kodzie:

• Po pierwsze, getElementById () Metoda wyodrębnia element płótna.
• Potem getContext () Metoda jest wykorzystywana do wyodrębnienia kontekstu rysunku do wyświetlania na płótnie.
• Ponadto FillReact () Metoda narysuje wypełniony prostokąt, przechodząc szerokość I wysokość argumenty.
• Na końcu, clearReact () usuwa piksele w określonym prostokącie.

Wyjście

Wyjście pokazuje, że określona część obecna na środku płótna jest wyczyszczona w oknie przeglądarki.

Przykład 2: Wyczyść kompletne płótno w JavaScript

Rozważa się metodę wyczyszczenia wszystkich elementów płótna poprzez naciśnięcie przycisku w JavaScript. Początkowo na płótnie umieszcza się reprezentację graficzną. Potem clearRect () Metoda jest stosowana w celu wyczyszczenia pełnej części płótna.

Rozważając clearRect () Metoda, kawałek kodu jest podzielony na pliki HTML i JavaScript.

Kod HTML

Naciśnij przycisk, aby wyczyścić prostokąt płótna

W tym kodzie:

• Element Canvas jest tworzony przez przypisanie "szerokość" z „300” I "wysokość" z „180” wymiary.
• Następnie dołączony jest przycisk, którego wartość jest „Wyczyść przycisk”.
• W końcu plik kodu JavaScript "test.JS ” jest powiązany z plikiem HTML wewnątrz tagi.

Kod JavaScript

var canvas = dokument.getElementById („mycan”);
var kontekst = płótno.getContext („2d”);
kontekst.początek ();
kontekst.Rect (18, 50, 200, 100);
kontekst.FillStyle = „czarny”;
kontekst.wypełnić();
kontekst.lineWidth = "20";
kontekst.udar mózgu();
dokument.GetElementById („Clear”).addEventListener („kliknij”, funkcja ()
kontekst.clearRect (0, 0, płótno.szerokość, płótno.wysokość);
, FAŁSZ);

Wyjaśnienie kodu jest tutaj napisane:

• getElementById („mycan”) jest wykorzystywany do wyodrębnienia elementu płótna, przekazując argument.
• Potem „2d” jest przekazywany do rysowania obrazu na dwuwymiarowej powierzchni za pomocą getContext () metoda.
• Ponadto kontekst.reagować() tworzy prostokąt, określając Wzgórza I szerokości.
• FillStyle właściwość jest wykorzystywana do określenia koloru.
• Potem wypełnić() Metoda jest stosowana do wypełnienia koloru w prostokącie.
• W końcu kontekst.clearReact () Metoda jest stosowana do wyczyszczenia płótna przez podanie szerokości i wysokości.

Wyjście

Wyjście zwraca czarne płótno, które jest wyczyszczone przez naciśnięcie „Wyczyść przycisk” w oknie.

Wniosek

W JavaScript, clearRect () zapewnia funkcję wyczyszczenia elementów płótna poprzez określenie wysokości i szerokości. Ten post wyjaśnił działanie i użycie metody ClearRect () do wyczyszczenia płótna w JavaScript. Dla lepszego zrozumienia uważa się, że dwa przykłady usuwają konkretne, a także usuwać wszystkie części płótna. Metoda jest korzystna dla przerysowania, planowania i animacji na płótnie.