HTML5 - zīmēšana uz audekla

Satura rādītājs
Galvenais, lai būtu spēcīgas struktūras, ir pamati, tāpēc mums ir jābūt spēcīgiem un skaidri definētiem pamatiem, tāpēc, lai varētu izmantot elementu maksimāli Audekls Vispirms mums padziļināti jāzina pamataspekti, un tāpēc mēs sāksim zīmēt pamatformas, ar to mēs uzzināsim, kā darbojas dažādas zīmēšanas metodes, un tad mēs varam izveidot sarežģītākas kompozīcijas.
Uzzīmējiet taisnstūri
Taisnstūris ir ļoti vienkāršs skaitlis, kas sastāv no 4 malām. Apskatīsim mūsu pieejamās metodes, lai to varētu uzzīmēt uz audekla:
  • clearRect (x, y, w, h): Notīra taisnstūri vai iepriekš norādīta taisnstūra daļu.
  • fillRect (x, y, w, h): Izmanto, lai uzzīmētu aizpildītu taisnstūri.
  • insultsRect (x, y, w, h): Izmanto, lai uzzīmētu taisnstūri bez aizpildījuma.
Kā mēs būsim pamanījuši, visas iepriekšējās metodes izmanto 4 argumentus, šie argumenti atbilst šādiem:
  • x un ir taisnstūra augšējās kreisās malas robežas.
  • w h atbilst platumam un augstumam.
Apskatīsim vienkāršu piemēru, lai šos elementus varētu izmantot praksē:
 Piemērs Jūsu pārlūkprogramma neatbalsta šo elementu audekls 

Šajā piemērā mēs redzam, ka mēs definējam dažus mainīgos, kur mēs sakām nobīde vai ierobežot, kur sāksies taisnstūri, izmēru un pēc tam mainīgo skaitu, kas kalpos kā skaitītājs atkārtojumu veikšanai, tāpēc nākamajā sadaļā mēs redzam, ka taisnstūrus veidosim dinamiski, redzēsim, kā tie tiek iezīmēti mūsu pārlūkprogramma:

Mēs esam izveidojuši divas rindas pa 5 taisnstūriem katrā, ja paskatāmies uz kodu, kuru mēs saucām par metodēm fillRect () vispirms aizpildītajiem taisnstūriem un pēc tam līdz insultsRect nepildītajiem.
Izmantojot clearRect () metodi
Ko darīt, ja mēs tagad vēlamies iztīrīt daļu no aizpildītajiem taisnstūriem? Šim nolūkam mums ir metode clearRect (), šādā kodā mēs redzēsim, kā tas darbojas:
 Piemērs Jūsu pārlūkprogramma neatbalsta šo elementu audekls 

Katram atkārtojumam metodei tiek piemērots zvans clearRect () un, veicot algoritmu, mēs esam likuši tam iet cauri visam aizpildīto taisnstūru centram, nākamajā attēlā redzēsim, kā tas izskatās mūsu pārlūkprogrammā:

Šeit mēs varam redzēt, kā mēs esam iztīrījuši teritoriju, kuru mēs iepriekš uzzīmējām.
Ar to mēs pabeidzam šo pamācību, kur mēs esam varējuši nedaudz padziļināti apskatīt dažas metodes, kuras mēs varam izmantot, lai iezīmētu mūsu elementu Audekls.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu

Jums palīdzēs attīstību vietā, daloties lapu ar draugiem

wave wave wave wave wave