Obsah
V zásadě jsou všechny obrázky vytvořeny z čar a křivek, v mnoha případech můžeme křivky simulovat pomocí velmi krátkých čar a ve velkém počtu, nicméně toto je velmi složité a vyžaduje to výjimečnou práci, HTML5 a jeho praktičnost nám nabízí Oblouková metoda Pomocí kterých můžeme rozvíjet zakřivené čáry a nějakým způsobem být schopni doplnit naše kresby.Oblouková metoda
Jak jsme zmínili na začátku, tato metoda nám umožňuje generovat zakřivené čáry uvnitř prvku plátno bez větší složitosti, bez nutnosti zavádět složité matematické vzorce, jak se v některých programovacích jazycích musí dělat.
Než uvidíme, jak tato metoda funguje, musíme znát její vlastnosti a vlastnosti, uvidíme je níže v následujícím seznamu:
- oblouk (x, y, rad, startangle, endangle, direction): Tato metoda nakreslí křivku na souřadnicích (x, y) s poloměrem rad, počáteční úhel je počáteční úhel a konec úhlu je úhel Konečný. Máme volitelný parametr, který je adresa a určuje směr, kterým se křivka nakreslená metodou bude ubírat.
- arcTo (x1, y1, x2, y2, rad): Tato metoda nám umožňuje nakreslit křivku na souřadnice (x2, y2), které procházejí souřadnicemi (x1, y1) a mají poloměr rad.
Jak vidíme, máme dvě základní metody, které nám umožňují vše potřebné, abychom mohli nakreslit zakřivené čáry v naší prvek plátnaNyní se podívejme na malý kód, abychom mohli ukázat, jak uvést do praxe to, co jsme právě viděli:
Příklad Váš prohlížeč nepodporuje soubor plátno živel Zakřivenou čáru jsme v příkladu vytvořili pomocí metody arcTo () že jsme dříve popsali, pro nakreslení této křivky jsme závislí na dvou přímkách, první je nakreslena od konce poslední dílčí cesty do bodu popsaného prvními dvěma argumenty metody a druhá čára je nakreslena z bodu popsaného první dva argumenty do bodu popsaného třetím a čtvrtým argumentem.
Nakonec je křivka nakreslena jako nejkratší čára mezi poslední dílčí cestou a druhým bodem, který popisuje křivku kruhu o poloměru určeném posledním argumentem, abychom viděli, co máme na mysli, kód obsahuje některé řádky odkaz červeně. Podívejme se níže na obrázek, jak to vypadá v našem prohlížeči:
