HTML5 - Crtanje na platnu

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.
Kao što smo primijetili, sve prethodne metode koriste 4 argumenta, ovi argumenti odgovaraju sljedećem:
  • x i su granice gornjeg lijevog ruba pravokutnika.
  • w h odgovaraju širini i visini.
Pogledajmo jednostavan primjer kako bismo ove elemente mogli primijeniti u praksi:
 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

Vi ćete pomoći u razvoju web stranice, dijeljenje stranicu sa svojim prijateljima

wave wave wave wave wave