Sadržaj
Element Platno To je jedan od najiščekivanijih noviteta koje ima HTML5 Budući da je to ozbiljna alternativa Adobe Flash dodatku, zahvaljujući svojim izvornim mogućnostima i ne ovisi o biblioteci treće strane, dobivamo stabilnost i podršku preglednika izravno, u slučaju problema s implementacijom HTML5 standarda .Element Platno omogućuje nam da ograničimo područje u našim dokumentima HTML5 gdje možemo nacrtati, pa čak i dodati efekte i pokrete putem Javascripta.
Element Canvas
Prije nego počnete raditi s stavkom Platno, definirat ćemo njegove osnovne karakteristike, imamo da je to element protoka, potpuno je nov u HTML5, njegovi atributi su visina za visinu i širina za širinu.
Pogledajmo ispod mali primjer kako možemo definirati platno u našem dokumentu:
Primjer Vaš preglednik ne podržava element platno Hajdemo brzo vidjeti što se događa u primjeru; prvo definiramo stil u kojemu dodjeljujemo malo debelu granicu kako bismo mogli razlikovati naše Platno prazan, tada pokrećemo element Canvas s oznakom otvaranja i definiramo njegove atribute visine i širine, unutar naljepnica stavljamo poruku u slučaju da se dokument otvori preglednikom koji ne podržava ovu specifikaciju standarda.
Pogledajmo sada kako ovaj kod koji smo upravo objasnili izgleda u našem pregledniku:
Naš prvi crtež
Kao što smo spomenuli na početku vodiča, za crtanje i radnje unutar platna moramo koristiti Javascript, za to ćemo koristiti metodu tzv. getContext () to nas stavlja u kontekst platna i pomoću njega možemo reći što da pokažemo.
Možemo crtati figure i u 2D i u 3D, za to prolazimo u slučaju prvog, argumenta "2d".
Pogledajmo sljedeći primjer kako bismo bolje definirali ono što objašnjavamo:
Primjer Vaš preglednik ne podržava element platno Ovdje smo jednostavno definirali varijablu ctx kojoj ćemo dodijeliti objekt dokument a potonji će pozvati metodu getContext i primijenite ga na element Canvas; onda imamo da varijabla ctx poziva metodu tzv fillRect i ovome prosljeđujemo neke koordinate, ako pomno pogledamo prolazimo kroz 4 strane, da vidimo da je ovo nacrtao u pregledniku:
