HTML5 - Rysowanie na płótnie

Kluczem do posiadania mocnych struktur są fundamenty, do tego musimy mieć mocne i dobrze zdefiniowane fundamenty, dlatego aby móc maksymalnie wykorzystać element Płótno Najpierw musimy dogłębnie poznać podstawowe aspekty i dlatego zaczniemy rysować podstawowe kształty, dzięki temu dowiemy się, jak działają różne metody rysowania, a następnie będziemy mogli tworzyć bardziej złożone kompozycje.
Narysuj prostokąt
Prostokąt to bardzo prosta figura składająca się z 4 boków, zobaczmy, jakimi metodami możemy go narysować na płótnie:

• clearRect (x, y, w, h): Czyści prostokąt lub część wcześniej określonego prostokąta.
• fillRect (x, y, w, h): Służy do rysowania wypełnionego prostokąta.
• strokeRect (x, y, w, h): Służy do rysowania prostokąta bez wypełnienia.

Jak zauważyliśmy, wszystkie poprzednie metody używają 4 argumentów, które odpowiadają następującym:

• x i są granicami lewej górnej krawędzi prostokąta.
• NS odpowiadają odpowiednio szerokości i wysokości.

Zobaczmy prosty przykład, abyśmy mogli zastosować te elementy w praktyce:

 Przykład Twoja przeglądarka nie obsługuje elementu płótno 

W tym przykładzie widzimy, że definiujemy pewne zmienne, w których mówimy zrównoważyć lub ogranicz miejsce rozpoczęcia prostokątów, rozmiar, a następnie liczbę var, która będzie służyć jako licznik do wykonania powtórzeń, więc widzimy w następnej sekcji, że wiemy, że będziemy tworzyć prostokąty dynamicznie, zobaczmy, jak zostaną narysowane w naszym przeglądarka:

Zrobiliśmy dwa rzędy po 5 prostokątów każdy, jeśli spojrzymy na kod, który nazwaliśmy metodami WypełnijProst () najpierw dla wypełnionych prostokątów, a potem do obrysRect dla niewypchanych.
Korzystanie z metody clearRect()
A co jeśli chcemy teraz wyczyścić część wypełnionych prostokątów? Do tego mamy metodę wyczyśćProst (), w poniższym kodzie zobaczymy jak to działa:

 Przykład Twoja przeglądarka nie obsługuje elementu płótno 

Dla każdego powtórzenia stosujemy wywołanie metody wyczyśćProst () a wykonując algorytm sprawiliśmy, że przeszedł przez cały środek wypełnionych prostokątów, zobaczmy na poniższym obrazku jak to wygląda w naszej przeglądarce:

Tutaj możemy zobaczyć, jak oczyściliśmy obszar, który wcześniej narysowaliśmy.
Na tym kończymy ten samouczek, w którym mogliśmy zobaczyć nieco bardziej szczegółowo niektóre metody, których możemy użyć do narysowania naszego elementu Płótno.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt