Učenje osnova HTML5 platna

  • Potrebno znanje: Osnovni, temeljni JavaScript i HTML5
  • Zahtijeva: jQuery
  • Vrijeme projekta: 1-2 sata
  • Datoteka za podršku

Ovaj je odlomak poglavlje 3 Temeljno HTML5 platno: za igre i zabavu Roba Hawkesa.

Do sada biste već trebali imati dobru ideju o tome što je platno i zašto je to fantastičan dio HTML5. U ovom ćemo članku pravilno pogledati značajke HTML5 platna, od učenja kako ga zapravo unijeti u HTML dokument do crtanja oblika i drugih vrsta predmeta na njemu. Također ćemo pogledati kako promijeniti način crtanja oblika i predmeta na HTML5 platnu, kao i kako ga izbrisati. Na kraju ćemo završiti s primjerom koji vam pokazuje kako napraviti platno iste veličine kao i prozor preglednika, što je integralna vještina za razvijanje imerzivnih igara. Nadam se da ćete se na kraju ovog vodiča osjećati još više uzbuđeni zbog HTML5 platna i mogućnosti koje se otvaraju pred vama.

01. Upoznavanje s elementom platna

Baš kao i video i audio, HTML5 element platna ne koristi apsolutno nikakve vanjske dodatke ili vudu da bi učinio svoje. Sve što vam treba je malo HTML-a i dodavanje JavaScripta ljubaznošću API-ja za kontekst 2d prikazivanja. Ne brinite ako trenutno nemate pojma što je API za kontekst 2d prikazivanja - uskoro ćete biti stručnjak za to.



Korištenje elementa platna jednostavno je - i mislim stvarno, stvarno jednostavan. Sljedeći je kôd sve što vam treba za početak:



Pretpostavljam da bih trebao biti iskren i reći vam da ovo zapravo ne čini ništa spektakularno. Sve što čini jest stvoriti novi prazan element platna, ali još ništa nećete moći vidjeti jer niste učinili ništa s kontekstom 2d prikazivanja. Uskoro ćemo pristupiti crtanju stvari na platnu, što je također jednostavno.

Za sada je važno napomenuti širina i visina atributi koji se koriste pri stvaranju elementa platna. Ti atributi očito definiraju veličinu elementa platna, što zauzvrat definira veličinu 2d konteksta prikazivanja. Bez definiranja veličine poput ove, element platna i kontekst 2d prikazivanja postavili bi se na zadanu širinu i visinu od 300 puta 150. Dalje u ovom poglavlju pogledat ćemo načine stvaranja elementa platna koji dinamički mijenja veličinu i ispunjava cijeli prozor preglednika.

Napomena: Položaj HTML5 elementa platna definiran je njegovim smještajem u vašem HTML dokumentu. Po potrebi se može premještati s CSS-om, baš kao i ostali HTML elementi.

02. Podrška preglednika za platno

Većina modernih preglednika podržava HTML5 element platna i većinu njegovih značajki, ali ne čudi činjenica da Internet Explorer to ne čini, barem ne u bilo kojoj verziji starijoj od Internet Explorer 9. Ako ste zadovoljni ovom životnom činjenicom , tada u rezervni sadržaj možete staviti prikladnu poruku za element platna koji tim siromašnim IE korisnicima daje do znanja da bi trebali nadograditi. Druga je opcija korištenje fantastične skripte ExplorerCanvas, koju su razvili neki boffini iz Googlea. Ljepota ove metode je u tome što na svoju web stranicu trebate uključiti samo jednu skriptu, a element platna će raditi u preglednicima Internet Explorer prije verzije 9.

Ako je ovo nešto što vas zanima, trebali biste preuzeti skriptu s Web stranica ExplorerCanvas i slijedite upute za instalaciju.

03. Kontekst 2d prikazivanja

Element platna uopće nije cool dio platna; to priznanje pada u kontekst 2d prikazivanja, strašan komad na kojem privlačite apsolutno sve. Svrha je elementa platna djelovati kao omotač oko 2d konteksta prikazivanja, pružajući vam sve potrebne metode i sočnu funkcionalnost za crtanje i manipulaciju njime. Stvarno je važno to razumjeti, pa da razjasnimo: vi se oslanjate na kontekst 2d prikazivanja, a ne na element platna. 2d kontekstu prikazivanja pristupate i prikazujete kroz element platna. Ne očekujem da će ovo još imati potpuni smisao, nadam se da će se stvari malo razbistriti kad zapnete s korištenjem platna za sebe.

04. Koordinatni sustav

2d kontekst prikazivanja standardna je platforma za crtanje zasnovana na ekranu. Kao i druge 2d platforme, koristi ravni kartezijanski koordinatni sustav s ishodištem (0, 0) u gornjem lijevom kutu. Pomicanjem udesno povećavat će se vrijednost x, a pomicanjem prema dolje vrijednost y. Razumijevanje načina na koji koordinatni sustav funkcionira bitno je ako želite da se stvari crtaju na pravom mjestu.

HTML5 platno: kartezijanski koordinatni sustav

2d prikaz konteksta kartezijanski koordinatni sustav

Jedna jedinica u koordinatnom sustavu obično je ekvivalentna 1 pikselu na zaslonu, tako da bi položaj (24, 30) bio 24 piksela desno i 30 piksela dolje. Postoje neke prilike u kojima bi jedinica u koordinatnom sustavu mogla biti jednaka 2 piksela, kao kod zaslona visoke razlučivosti, ali općenito pravilo je da je 1 koordinatna jedinica jednaka 1 pikselu zaslona.

05. Pristup 2d sustavu prikaza

Nema smisla petljati se pokušavajući sve to objasniti riječima kad bismo to mogli početi koristiti. Pa učinimo upravo to stvaranjem osnovne HTML web stranice s praznim elementom platna:





Učenje osnova platna


Sva Prava Pridržana | anymediaeditor.com