Spisie treści
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.
- x i są granicami lewej górnej krawędzi prostokąta.
- NS odpowiadają odpowiednio szerokości i wysokości.
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:
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:
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
