În acest articol, vă prezentăm noul element HTML5 - panza, care vă permite să desenați diverse obiecte și să le afișați în cele mai moderne browsere. După ce ați citit această lecție, veți învăța cum să accesați elementul de panza, să desenați forme, să schimbați culorile și să ștergeți obiecte. Obțineți un bilet către lumea modernă a tehnologiilor Web.
Familiarizarea cu elementul Canvas
Folosirea elementului de pânză este foarte simplă
Când auziți panza cuvântului, vă gândiți imediat la un nou element HTML5 cu același nume. Din punct de vedere tehnic, aceasta este doar jumătate din întregul adevăr, dar să nu mai vorbim acum. Elementul de pânză este o inovație pentru toate browserele.
Pentru a utiliza elementul canvas, trebuie doar să creați o etichetă HTML adecvată și apoi să definiți lățimea și înălțimea.
Dar cu siguranță acest lucru nu este totul. Codul scris mai sus va fi plasat pe pagina dvs. de panza cu un fundal transparent. Avertisment: conținutul din interiorul etichetei de panza va fi afișat numai dacă browserul dvs. este învechit și nu acceptă această funcție.
Acest articol este destinat numai celor mai moderne browsere
Trebuie să rețin că cele mai moderne browsere acceptă acest element, chiar și cel mai recent Internet Explorer.
Apropo, puteți activa acest element în versiunile anterioare ale Internet Explorer cu ajutorul acestui plugin - Canvas Explorer.
Canvas Dimensiuni
În exemplul de mai sus, ați văzut deja cum să aplicați atributele de lățime și înălțime: lățime și înălțime. Folosind CSS, puteți de asemenea controla dimensiunea panzei, ca și alte elemente HTML. Și acest lucru este destul de logic. Cu toate acestea, deoarece panza folosește așa-numitul context bidimensional în funcționalitatea sa, atunci când se aplică CSS la dimensiunile canvasului, toate elementele interne vor fi distorsionate.
Un pic despre contextul bidimensional
Oarecum mai sus, am spus că elementul de panza este doar jumătate din poveste. A doua jumătate este doar un context bidimensional, care de fapt vă permite să vedeți și toată puterea funcționalității acestui element.
Sistem de coordonate
Dacă ați lucrat vreodată cu limbi care se ocupă de grafica 2D (cum ar fi ActionScript, Procesare, etc.), atunci știi totul despre sistemele de coordonate bazate pe mișcare. Contextul bidimensional din elementul de panza nu este diferit de sistemele listate. Utilizează sistemul de coordonate standard cartesian, cu punctul de pornire (0, 0) situat în partea stângă sus. Deplasarea spre dreapta va crește valoarea obiectului de-a lungul axei x, în timp ce deplasarea în jos va crește valorile punctelor de obiect de-a lungul axei y. Totul este destul de primitiv.
O unitate a acestui sistem de coordonate este egală cu un pixel al ecranului (în majoritatea cazurilor).
Accesarea unui context bidimensional
Ca urmare a apelarea metodei getContext, variabila ctx se va referi acum la un context bidimensional. Aceasta înseamnă că acum cu această variabilă puteți începe să desenați forme pe elementul de panza. Răcoros, nu?
Desenarea pătratelor
Acum, că avem acces la un context bidimensional, puteți începe în siguranță să utilizați toate funcțiile API-ului de mai sus. Una dintre cele mai frecvent utilizate funcții este fillRect, care creează pătrate negre (implicit).
Adăugați următorul cod, utilizând variabila ctx, despre care am vorbit înainte:
Acest cod va desena un pătrat negru în partea stângă superioară a pânzei. Aproximativ astfel:
Felicitări! Tocmai ți-ai atras prima figura în elementul HTML5 al pânzei. Care sunt senzațiile?
În metoda fillRect se pot scrie 4 parametri:
- Prima este poziția de-a lungul axei x;
- A doua este poziția de-a lungul axei y;
- Al treilea este parametrul care este responsabil pentru lățime;
- A patra este înălțimea.
Dacă vopsea metoda prototip în pseudo-cod, se va arăta după cum urmează:
Această funcție are același set de argumente ca fillRect. Ca rezultat, veți primi un alt pătrat:
Doar. Elegant. Și din nou pur și simplu! Acum înțelegeți principiul prin care funcționează elementul de pânză. Toate celelalte metode sunt similare cu cele două. Utilizarea lor este la fel de simplă. Dacă credeți că este ceva primitiv, atunci nu vă faceți griji. Toate aceste elemente pot face miracole împreună.
Desen în funcție de schemă
În plus față de dreptunghiurile (care pot fi desenate printr-o metodă din API), puteți desena forme și în funcție de schema proprie. Datorită schemelor, puteți crea linii drepte sau curbe, precum și forme mai complexe.
Pentru a crea o schemă completă, va trebui să utilizați următoarele metode din API:
- beginPath: începerea circuitului;
- moveTo: metoda pentru crearea unui punct;
- lineTo: Desenează o linie de la punct la punct care a fost creată de metoda moveTo sau până la punctul din linia trecută trasată de metoda lineTo;
- ClosePath: finalizați schema.
- umpleți: umpleți forma cu culoarea.
- accident vascular cerebral: creați o cale.
Încercați următorul exemplu:
Acest cod va desena un triunghi de culoare neagra:
Aceleași principii pe care le puteți utiliza pentru a desena formele de care aveți nevoie. În următoarea lecție dedicată acestui subiect, vom vorbi despre desenarea mai avansată a figurilor, cum ar fi ovale, curba Bezier etc.
Merită să menționăm acest lucru acum: desenarea de către schemă este folosită pentru a crea forme mai complexe decât cele dreptunghiulare.
Modificați culorile
Nu este nimic de spus aici, deci să le aplicăm imediat în practică:
Acest cod va colora pătratul în roșu:
Sau puteți modifica culoarea cadrului pătrat:
Deci ați învățat cum să aplicați aceste metode:
Metodele fillStyle și strokeStyle sunt convenabile deoarece folosesc aceleași culori ca în CSS obișnuit. Aceasta înseamnă că puteți utiliza RGB, RGBA, HSA, cuvinte speciale ("roșu") și valori hexazecimale.
Merită remarcat imediat faptul că schimbarea culorii nu traduce conținutul deja existent al elementului de panza. De exemplu, dacă ați desenat un dreptunghi negru, ați creat un material de umplere pentru roșu și apoi ați desenat un alt dreptunghi, atunci prima formă va rămâne neagră.
Modificarea grosimii liniei
Puteți adăuga acest cod la exemplul anterior:
Și iată ce obțineți:
Același principiu se poate aplica schemelor. De exemplu, puteți schimba exemplul cu un triunghi:
Și iată ce obțineți:
Ștergerea obiectelor din panza
Ultimul lucru pe care vreau să-ți arăt astăzi este ștergerea obiectelor. Știți deja cum să desenați o formă. Acum e timpul sa inveti cum sa scapi de ea :)
În acest exemplu, panza are o lățime de 500px și o înălțime de 500px. Pentru a curăța întreaga zonă, trebuie să faceți următoarele:
În acest exemplu, probabil că nu trebuie să confirmați lucrarea codului cu o captură de ecran, deoarece nu veți vedea nimic. Pătratul a fost desenat și apoi șters instantaneu.
Notă: argumentele pentru metoda clearRect sunt exact aceleași ca și pentru fillRect; x, y, lățime și înălțime.
Dacă nu ați hotărât cu privire la înălțime și lățime, atunci puteți scrie astfel:
Ștergerea fragmentelor mici
Pentru a șterge un mic fragment, nu este nevoie să scrapeți întreaga zonă a pânzei. Puteți șterge cu ușurință zona fără probleme. Imaginați-vă că ați desenat 2 pătrate, dintre care vreți să ștergeți:
În momentul de față, imaginea este următoarea:
Puteți șterge cu ușurință pătratul negru fără probleme și lăsa roșu în loc folosind metoda clearRect:
Rețineți că datele trebuie să se potrivească cu cele specificate la crearea elementului. De fapt, această metodă schimbă pur și simplu transparența fiecărui scriblu:
Destul de simplu, nu-i așa? Nu veți șterge adesea elementele în timpul desenării, dar veți avea nevoie de aceste cunoștințe atunci când învățăm să realizăm animații.
Suntem în pas cu vremurile
Panza este ușor de folosit și de învățat
Sper că ați văzut că pânza este un element foarte promițător al unei pagini web. Acesta vă permite să creați imagini utilizând un cod curat fără plug-inuri. Este ușor de folosit și de învățat, și de fapt, mâinile cu pricepere se pot transforma în ceva foarte original.
În următorul articol, vom examina câteva tehnici avansate pentru lucrul cu elementul de pânză, cum ar fi ovaluri de desen, linii curbe și alte lucruri. Dacă acest lucru nu este suficient, atunci în viitor vă vom spune cum să transformați obiectele (rotire, reducere, creștere), cum să lucrați cu imagini și să lucrați și cu animația. Vei fi foarte interesat, îmi poți lua cuvântul.
Și acum, sper că aveți o mulțime de informații utile care vă vor permite să obțineți o idee generală despre pânză. Acest element este o tehnologie fantastică care vă va permite să realizați toate fanteziile stocate în cap.
Ultimele 5 lecții din titlul "HTML și DHTML"
Când scriem sau depanem script-uri PHP, folosim adesea funcțiile var_dump () și print_r () pentru a scoate datele și obiectele preliminare de matrice. În acest post, aș vrea să vă spun despre funcția var_export (), care poate converti un matrice într-un format adecvat pentru cod PHP.
Câteva șabloane gratuite pentru panouri de administrare.
Crearea unui șablon pentru scriere nu este o chestiune atât de simplă. Vă oferim o selecție de 30 de site-uri unde puteți descărca modele gratuite pentru toate gusturile.
De exemplu, aveți un câmp de căutare care este procesat de fiecare dată când apăsați tasta tastaturii. Dacă cineva dorește să scrie cuvântul Windows, cererea AJAX va fi trimisă pe următoarele fragmente: W, Wi, Win, Wind, Windo, Window, Windows. Problema?
O selecție de 15 site-uri noi unde puteți descărca fotografii gratuite pentru a le completa site-urile.
Această carte a fost mult timp citită, și aici tocmai sa trezit.
adaev_kazbek
Acest lucru este asemănător cu a spune - prost nu înțelege, inteligent va păstra tăcerea. În cazul nostru, o mulțime de oameni încă nu înțeleg masterizarea web, dar încercați. În ceea ce privește mine, am făcut primul an încearcă să-l învețe toate de unul singur, pentru a fi în mod necesar în măsură să aplice cunoștințele în practică, și sunt sigur că Eugene are nu un kilogram începători învețe pe alții, și ei vor fi recunoscători. Dar tu, tocmai am citit pentru o lungă perioadă de timp - ceea ce a fost aspectul? ;-)
JS_JQ_BEST
Sunt de acord cu tine, o astfel de lecție este necesară, va fi mai ușor să înveți mai departe!
Nu am citit. Dar până acum, mi se pare, devreme.
profesor08
Aceeași proprietate CSS este raza de graniță / graniță. De-a lungul triunghiului, trebuie să înveți mai multe chimie. Și va funcționa peste tot.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: