La prima vedere, utilizarea panzei poate părea similară cu utilizarea programului MS Paint introdus în fereastra browserului. Dar, după ce a săpat mai adânc, putem vedea că pânza - un ingredient cheie pentru un număr de aplicații grafice avansate, inclusiv unele aplicații, dintre care le au, probabil, ei înșiși crezut - jocuri, instrumente de cartografiere, și grafică dinamică, și unele pe care le poate nu v-am putut imagina - reprezentări de lumină muzicală și emulatori ai proceselor fizice.
În trecutul nu prea îndepărtat, crearea unor astfel de aplicații fără ajutorul modulelor de extensie, precum Flash, a fost extrem de dificilă. Astăzi, panza face brusc toate aceste aplicații posibile, dacă, bineînțeles, sunteți gata pentru un timp suplimentar și costuri intelectuale.
Elemente de bază pentru panza
element
Dimensiunile panzei ar trebui să fie întotdeauna stabilite prin atributele lățimii și înălțimii elementului
De obicei, panza este afișată ca un dreptunghi gol fără o margine, adică nu este vizibil deloc. Pentru a face vizibilă panza, folosind foaia de stil, îi puteți da fundal sau cadru colorat, după cum se arată în următorul cod:
Rezultatul, care va fi punctul nostru de plecare în studiul canvasului, este prezentat în figură:
Contextul poate fi considerat ca un instrument de desen superputerizat care efectuează toate operațiile necesare pentru aceasta, cum ar fi crearea de dreptunghiuri, imprimarea textului, inserarea imaginilor și așa mai departe. Este un atelier universal pentru pictura pe panza.
Faptul că contextul este numit în mod clar o bidimensional (în codul denumit „2d“), dă naștere la întrebarea evidentă, și anume, dacă există un context de desen tridimensional? Răspunsul la această întrebare nu este încă, însă este clar că creatorii HTML5 au lăsat un loc în viitor.
Obțineți obiectul context și începeți desenul în orice moment, de exemplu, imediat după încărcarea paginii, când utilizatorul face clic pe mouse, etc. Voi, cel mai probabil, sunteți deja nerăbdători să creați o pagină pe care ați putea începe imediat să lucrați cu pânza. Următorul cod arată codul pentru crearea unui șablon pentru această pagină:
În secțiunea de marcare