Cuprins
Elementul Pânză Este una dintre cele mai așteptate noutăți pe care le are HTML5 Deoarece este o alternativă serioasă la plug-in-ul Adobe Flash, datorită capabilităților sale native și prin faptul că nu depinde de o bibliotecă terță parte, obținem stabilitate și suport pentru browser direct, în cazul unei probleme cu implementarea standardului HTML5 .Elementul Pânză ne permite să delimităm o zonă în documentele noastre HTML5 unde putem desena și chiar adăuga efecte și mișcări prin Javascript.
Elementul Canvas
Înainte de a putea începe să lucrați cu elementul Pânză, vom defini caracteristicile sale de bază, considerăm că este un element de flux, este complet nou în HTML5, atributele sale sunt înălțimea pentru înălțimea sa și lățimea pentru lățimea sa.
Să vedem mai jos un mic exemplu despre cum putem defini o pânză în documentul nostru:
Exemplu Browserul dvs. nu acceptă elementul pânză Să vedem rapid ce se întâmplă în exemplu; mai întâi definim un stil în care atribuim o margine ușor groasă pentru a ne putea distinge Pânză gol, apoi începem elementul Canvas cu eticheta sa de deschidere și îi definim atributele de înălțime și lățime, în interiorul etichetelor plasăm un mesaj în cazul în care documentul este deschis cu un browser care nu acceptă această specificație a standardului.
Să vedem acum cum arată acest cod pe browserul nostru:
Primul nostru desen
După cum am menționat la începutul tutorialului, pentru a desena și a face acțiuni în cadrul Canvas, trebuie să folosim Javascript, pentru aceasta vom folosi o metodă numită getContext () care ne plasează în contextul Pânzei și cu ea îi putem spune ce să arate.
Putem desena figuri atât în 2D, cât și în 3D, pentru aceasta trecem în cazul primului, argumentul „2d”.
Să ne uităm la următorul exemplu pentru a defini mai bine ceea ce explicăm:
Exemplu Browserul dvs. nu acceptă elementul pânză Aici, pur și simplu am făcut a fost definirea unei variabile ctx căruia urmează să îi atribuim obiectul document iar acesta din urmă va numi metoda getContext și aplicați-l pe elementul Canvas; atunci avem că variabila ctx numește o metodă numită fillRect și la aceasta trecem câteva coordonate, dacă ne uităm cu atenție le trecem pe 4 laturi, să vedem că a desenat acest lucru în browser:
