Sadržaj
Ključ za snažne strukture su temelji, za to moramo imati čvrste i dobro definirane temelje, dakle kako bismo mogli koristiti element do najvećeg kapaciteta Platno Prvo moramo dubinski upoznati osnovne aspekte i zato ćemo početi crtati osnovne oblike, naučit ćemo kako funkcioniraju različite metode crtanja, a zatim ćemo moći napraviti složenije kompozicije.Nacrtaj pravokutnik
Pravokutnik je vrlo jednostavna figura koja se sastoji od 4 strane, pogledajmo metode koje imamo na raspolaganju kako bismo ga mogli nacrtati na platnu:
- clearRect (x, y, w, h): Čisti pravokutnik ili dio prethodno navedenog pravokutnika.
- fillRect (x, y, w, h): Koristi se za crtanje ispunjenog pravokutnika.
- strokeRect (x, y, w, h): Koristi se za crtanje pravokutnika bez ispune.
- x i su granice gornjeg lijevog ruba pravokutnika.
- w h odgovaraju širini i visini.
Primjer Vaš preglednik ne podržava element platno
U ovom primjeru vidimo da definiramo neke varijable, gdje kažemo pomak ili ograničiti gdje će početi pravokutnici, veličinu, a zatim i broj varijabli koji će poslužiti kao brojač za ponavljanje, pa vidimo u sljedećem odjeljku da znamo da ćemo pravougaonike praviti dinamički, da vidimo kako su nacrtani u našem preglednik:
Napravili smo dva reda po 5 pravokutnika svaki, ako pogledamo kod koji smo nazvali metodama fillRect () prvo za ispunjene pravokutnike, a zatim do strokeRect za one bez punjenja.
Korištenjem metode clearRect ()
Što ako sada želimo očistiti dio ispunjenih pravokutnika? Za to imamo metodu clearRect (), u sljedećem kodu vidjet ćemo kako to radi:
Primjer Vaš preglednik ne podržava element platno
Za svako ponavljanje primjenjujemo poziv na metodu clearRect () i kad smo radili algoritam učinili smo da prođe kroz cijelo središte ispunjenih pravokutnika, pogledajmo na sljedećoj slici kako to izgleda u našem pregledniku:
Ovdje možemo vidjeti kako smo očistili područje koje smo prethodno nacrtali.
Ovim završavamo ovaj vodič u kojemu smo mogli malo dublje vidjeti neke metode koje možemo upotrijebiti za crtanje u našem elementu Platno.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod