Sadržaj
U osnovi su sve figure izrađene od linija i krivulja, u mnogim slučajevima možemo simulirati krivulje pomoću vrlo kratkih linija i u velikom broju, međutim to je vrlo složeno i uključuje izniman rad, HTML5 a njegova praktičnost nudi nam Lučna metoda Pomoću kojih možemo razviti zakrivljene linije i na neki način moći nadopuniti svoje crteže.Lučna metoda
Kao što smo spomenuli na početku, ova metoda nam omogućuje generiranje zakrivljenih linija unutar elementa platno bez veće složenosti, bez potrebe za uvođenjem složenih matematičkih formula što bi se moglo učiniti u nekim programskim jezicima.
Prije nego što vidimo kako ova metoda funkcionira, moramo znati njezine karakteristike i svojstva, vidjet ćemo ih u nastavku na sljedećem popisu:
- luk (x, y, rad, zvjezdani kut, ugrožavanje, smjer): Ova metoda crta krivulju na koordinatama (x, y) s radijusom rad, početni kut je početni kut a kraj kuta je kutKonačno. Imamo izborni parametar koji je adresa te određuje smjer u kojem će krenuti krivulja nacrtana metodom.
- arcTo (x1, y1, x2, y2, rad): Ova nam metoda omogućuje crtanje krivulje prema koordinatama (x2, y2) koje prolaze koordinate (x1, y1) i imaju radijus rad.
Kao što vidimo, imamo dvije osnovne metode koje nam omogućuju sve potrebno kako bismo mogli nacrtati zakrivljene linije u našoj element platna, a sada da vidimo mali kod kako bismo mogli pokazati kako u praksi primijeniti ono što smo upravo vidjeli:
Primjer Vaš preglednik ne podržava platno element Zakrivljenu liniju u primjeru smo napravili metodom arcTo () da smo prethodno opisali, za crtanje ove krivulje ovisimo o dvije linije, prva se vuče od kraja posljednje podpute do točke opisane prva dva argumenta metode, a druga linija se crta iz točke opisane prva dva argumenta do točke koju opisuju treći i četvrti argument.
Konačno, krivulja je nacrtana kao najkraća linija između posljednje podpute i druge točke koja opisuje krivulju kruga s radijusom navedenim posljednjim argumentom, tako da možemo vidjeti na što mislimo, kôd uključuje neke linije referenca u crvenoj boji. Pogledajmo ispod sliku kako to izgleda u našem pregledniku:
