Sadržaj
Prilikom korištenja stavke platno za crtanje nismo ograničeni na crtanje pravokutnih figura, možemo crtati i pomoću koordinata i tzv staze koji su putovi kojima ćemo označiti element platno gdje i kako prikazati naš crtež.Mogućnosti koje nam to daje su impresivne, jer s potrebnim algoritmima možemo napraviti neograničene kompozicije, nacrtati bilo koju vrstu figure u HTML5 a s njim do postizanja u sprezi s drugim elementima rezultata nikada zamišljenih u prethodnim specifikacijama jezika.
Korištenje Path
Kao što smo spomenuli staza to je ono što će nam omogućiti da na platnu naznačimo koordinate prema kojima bi crtež trebao biti izveden, s tim koordinatama platno će moći znati gdje povući odgovarajuće crte i na kraju s ispravnom akumulacijom linija možemo postići bilo koje vrsta figure.
Prije nego pređemo na odgovarajuće primjere, moramo znati koje su metode dostupne za element platna i put, pogledajmo sljedeći popis:
- beginPath (): Ova nam metoda omogućuje početak novog puta.
- closePath (): Ova metoda pokušava zatvoriti trenutnu putanju povlačenjem crte od kraja zadnjeg retka do početnih koordinata.
- fill (): Ispunite obrasce opisane podputovima.
- isPointInPath (x, y): Vraća true ako je navedena točka sadržana u obliku nacrtanom trenutnom putanjom.
- lineTo (x, y): Nacrtajte podputu na navedenim koordinatama.
- moveTo (x, y): Omogućuje nam prelazak na navedene koordinate bez crtanja podpute.
- izravno (x, y, w, h): Nacrtajte pravokutnik čije koordinate u gornjem lijevom kutu odgovaraju (x, y) njegova širina odgovara w, a visina h.
- moždani udar (): Nacrtajte vanjske crte oblika iscrtanih podputom.
• Metodu nazivamo beginPath.
• Metodom prelazimo u početni položaj moveTo.
• Metode crtamo podputeve linijaToitd.
• Po izboru možemo nazvati metodu closePath.
• Na kraju pozivamo metode ispuniti ili stoke.
Već imamo preporučeni redoslijed za početak crtanja, sada vidimo odgovarajući kod u HTML5.
Primjer Vaš preglednik ne podržava element platno Kao što vidimo, dva su poziva upućena beginPath(), s ovim možemo započeti područja za crtanje na platnu, a zatim pomoću moveTo () uspostavimo početne pozicije, a ostalo je za crtanje.
Pogledajmo kako naš crtež izgleda u pregledniku:
