Spisie treści
Zasadniczo wszystkie figury są wykonane z linii i krzywych, w wielu przypadkach możemy symulować krzywe za pomocą bardzo krótkich linii i w dużych ilościach, jednak jest to bardzo złożone i wymaga wyjątkowej pracy, HTML5 a jego praktyczność daje nam Metoda łukowa Dzięki którym możemy tworzyć zakrzywione linie i w pewien sposób uzupełniać nasze rysunki.Metoda łukowa
Jak wspomnieliśmy na początku, ta metoda pozwala nam generować zakrzywione linie w elemencie płótno bez większej złożoności, bez konieczności wprowadzania skomplikowanych formuł matematycznych, co może być konieczne w niektórych językach programowania.
Zanim zobaczymy, jak działa ta metoda, musimy poznać jej cechy i właściwości, zobaczymy je poniżej na poniższej liście:
- łuk (x, y, rad, startangle, endangle, kierunek): Ta metoda rysuje krzywą o współrzędnych (x, y) o promieniu rad, kąt początkowy to kąt początkowy a koniec kąta to kąt Finał. Mamy opcjonalny parametr, którym jest adres i określa kierunek, w jakim przyjmie krzywa narysowana tą metodą.
- arcTo (x1, y1, x2, y2, rad): Ta metoda pozwala nam narysować krzywą do współrzędnych (x2, y2), które przechodzą współrzędne (x1, y1) i mają promień rad.
Jak widać, mamy dwie podstawowe metody, które pozwalają nam na wszystko, co niezbędne, aby móc narysować zakrzywione linie w naszym element płótna, zobaczmy teraz mały kod, abyśmy mogli zademonstrować, jak zastosować w praktyce to, co właśnie widzieliśmy:
Przykład Twoja przeglądarka nie obsługuje płótno element Linię krzywą wykonaliśmy w przykładzie metodą łukDo () które opisaliśmy wcześniej, aby narysować tę krzywą opieramy się na dwóch liniach, pierwsza jest rysowana od końca ostatniej podścieżki do punktu opisanego przez dwa pierwsze argumenty metody, a druga linia jest rysowana od punktu opisanego przez pierwsze dwa argumenty do punktu opisanego przez argumenty trzeci i czwarty.
Na koniec krzywa jest rysowana jako najkrótsza linia między ostatnią podścieżką a drugim punktem, który opisuje krzywą koła o promieniu określonym przez ostatni argument, abyśmy mogli zobaczyć, co mamy na myśli, kod zawiera kilka linii odniesienie w kolorze czerwonym. Zobaczmy poniżej obraz, jak to wygląda w naszej przeglądarce:
