Învață html5 panza

Performanță.
Sobsno, aici. PoShamaniv, puteți realiza 900+ FPS. O presupunere în versiunea de test a Opera 11.50 cu accelerare GPU. Adică performanța este la un nivel bun și va crește odată cu dezvoltarea tehnologiei.

Metodele și proprietățile pot fi găsite aici.

Desen.
Observ că setul de desene este minim, doar lucrurile de bază necesare. Din cifre este un arc, un dreptunghi, linii, curbe. De exemplu, pentru a desena un cerc, trebuie să desenați un arc închis.
Pentru a roti cifrele trase, trebuie să se rotească întreaga panza (o cale directă de a transforma figura nu este prezent), pentru a desena forma dorită, și apoi întoarce înapoi la panza. De asemenea, puteți schimba coordonatele inițiale ale pânzei. Există metode pentru a salva poziția pânză și returnați-l la starea salvată. Există suport pentru afișarea textului, adăugarea de imagini.
Metoda clearRect () șterge zona dreptunghiulară a pânzei.
Trebuie să spun că API nu este foarte convenabil - parametrii metodei pot fi 9 bucăți:

înțelegeți codul, desigur, nu foarte frumos. IMHO, unde ar fi mai convenabil transferul unui obiect:

Această problemă este rezolvată de cadre, nu le voi revizui, nu le veți face pe voi înșivă, dacă va fi necesar, sau nu vă veți scrie pe cont propriu.

Animație.
Probabil cea mai mare parte importantă și interesantă a pânzei.
Dacă faceți animație cu Adobe Flash, amintiți-vă că puteți schimba pur și simplu poziția obiectului pe scenă sau pe aspectul său, schimbând parametrii corespunzători. Aici trebuie să repetați totul, adică pentru tweens de mișcare, trebuie să ștergeți fiecare cadru al vechii poziții și să trasați unul nou.
Deoarece există suport nativ pentru desenarea întregii imagini sau doar a unei anumite zone din aceasta - animația pe sprite este implementată simplu și rapid.
Curatarea intregii panza folosind clearRect () - un proces costisitor, iar dacă vă va curăța întreaga panza fiecare cadru, apoi imediat odihnit în problema productivității. Prin urmare, principala regulă aici este de a redrage doar ceea ce sa schimbat. O soluție populară este suprapunerea mai multor pânză transparentă pe partea de sus a reciproc, pentru a trage elemente statice din pânză de fundal și schimbări frecvente în partea din față. Din nou, cadrul poate servi ca un bun ajutor, în acest caz, dar poate, dimpotrivă, să facă curățenie suplimentară a pânzei dacă este utilizat în mod necorespunzător.

3D.
Da, puteți desena în 3D. Există multe exemple pe net. Nu o voi descrie în cadrul postului.

Asta sa dovedit la mine.
Privind la acest lucru, și exemplele, am vrut de asemenea să „zaanimirovat“ orice amenzi. A doua zi am ceva deja sa întâmplat, dar a mâncat până la 70% din procesorul meu și am luat optimizarea. Abandonarea ambele cadre testate, și a petrecut toate sărbătorile de Anul Nou, am fost capabili de a realiza ceva. Adevărat, ea se blochează complet firefox pentru ubuntu, în timp ce în alte browsere, inclusiv versiunile de Windows în FF, sarcina este acceptabilă. Despre acest lucru, sa dovedit, este scris în bugtracker-ul Mozilla.

P.S. Dacă citiți Internetul, atunci aproape fiecare articol pe pânză - flares holivar vs. dar cer utilizatorilor să facă acest post o excepție.