Share
Acesta este primul articol dintr-o serie care vă va aduce la maxim viteza cu panza HTML5, funcționalitatea desenului fără pluginuri încorporată în browserele moderne. În acest articol introductiv, vă voi arăta cum să accesați elementul de panza, să desenați forme, să schimbați culorile și să ștergeți lucrurile. Este un tur al opțiunilor de bază ale acestei noi tehnologii Web uimitoare.
Seria va fi o plimbare interesantă și una pe care sper că vă bucurați. Presupun că sunteți deja confortabil cu JavaScript, dar aveți puțină experiență cu panza. Chiar dacă sunteți nou la JavaScript, nu vă îngrijorați, deoarece veți învăța în continuare ceva din aceste articole.
Folosirea elementului de pânză este ușoară.
Când vă gândiți la panza, probabil că vă gândiți la noul HTML5 pânză element. Din punct de vedere tehnic, aceasta este doar o jumătate din poveste, dar să uităm de asta deocamdată. pânză element este fața publică a acestei caracteristici noi de browser.
Utilizarea pânză elementul este mort ușor; este o etichetă HTML simplă, cu o lățime și înălțime definite.
Acest lucru nu face încă multe. De fapt, tot ce face este inserarea unei pagini transparente în pagină. Conținutul din interiorul pânză elementul este un conținut de rezervă, care va fi afișat numai dacă un browser nu acceptă panza.
Suportul de browser pentru panza este destul de uimitor.
Este important să subliniem că suportul browserului pentru pânză este destul de uimitor. Fiecare browser modern îl acceptă, inclusiv cel mai recent Internet Explorer.
Interesant este faptul că puteți utiliza o funcție de panza în Internet Explorer versiunea 8 și mai jos, prin pluginul ExplorerCanvas.
O lecție cheie pe care am învățat-o cu panza este că trebuie să setați în mod explicit lăţime și înălţime atributele pânză element în definirea dimensiunilor sale. Folosind CSS pentru a seta lățimea și înălțimea va provoca în mod efectiv panza la scară în sus (sau în jos) la această dimensiune. Există un motiv logic în spatele acestei situații; are de a face cu pânză element fiind un container pentru ceva numit contextul de redare 2d. Cu toate acestea, este important să știți că utilizarea CSS pentru a seta dimensiunile panzei va avea un efect ciudat.
Am menționat în ultima secțiune că pânză element este doar o jumătate din poveste. Cealaltă jumătate este contextul de redare 2d; partea de panza care vă permite să faceți lucrurile reale pe care le puteți vedea de fapt.
Permiteți-mi să fac un lucru complet clar: atunci când utilizați panza, nu vă desenați pânză element. În schimb, de fapt, folosiți contextul de redare 2d, pe care îl accesați prin pânză element prin API-ul JavaScript. Nu contează cu adevărat în marea schemă a lucrurilor, dar este util să știm.
Dacă ați utilizat deja limbi de programare grafică 2d (ActionScript, Procesare, etc), atunci veți afla totul despre sistemele de coordonate bazate pe ecran. Contextul de redare 2d în panza nu este diferit; utilizează un sistem standard de coordonate carteziene, cu punctul de origine (0, 0) în partea stângă sus. Deplasarea spre dreapta va crește valoarea lui X axă, în timp ce se deplasează în jos va crește valoarea lui y axă. E destul de simplu.
O unitate din sistemul de coordonate este egală cu un pixel pe ecran (în majoritatea cazurilor).
Pentru a utiliza efectiv contextul de redare 2d, va trebui să utilizați JavaScript API. Partea API pe care doriți să o utilizați este getContext astfel:
Canvas de la zero
Notă: folosiți jQuery aici, dar numai pentru a verifica când DOM este gata. Puteți folosi biblioteca JavaScript preferată sau plasați codul în partea de jos a documentului.
Ca urmare a chemării getContext, CTX variabila va conține acum o referință la contextul de redare 2d. Acest lucru înseamnă că acum aveți totul în loc pentru a începe de fapt, atragerea pe pânză. Partea distractivă!
Acum că aveți acces la contextul de redare 2d, puteți începe să apelați metodele de desenare ale API. Una dintre cele mai de bază este fillRect, care trage un dreptunghi care este completat într-o anumită culoare (negru în mod implicit).
Adăugați codul de mai jos CTX variabilă de la început:
ctx.fillRect (50, 50, 100, 100);
Acest lucru va atrage un pătrat negru care este ușor depărtat de marginea stângă și de sus a pânzei, după cum urmează:
Tocmai ți-ai atras prima formă folosind panza HTML5. Se simte bine, corect?
Notă: Veți observa că utilizați metoda dreptunghiulară a API-ului JavaScript pentru a desena pătrate. Acest lucru se datorează faptului că nu există metode în panza pentru a desena pătrate direct, simplu, deoarece pătrate sunteți dreptunghiuri (au patru laturi cu unghiuri drepte între ele).
Există patru argumente într-un apel pentru fillRect:
Scrisul este pseudocod, fillRect ar arata astfel:
ctx.fillRect (x, y, lățime, înălțime);
Lucrul cool este că nu vă limitați doar la dreptunghiuri pline. Nu. Puteți, de asemenea, să desenați dreptunghiuri mută; adică, dreptunghiuri cu un contur în jurul lor. În acest scop puteți utiliza strokeRect metoda de API JavaScript, cum ar fi:
ctx.strokeRect (50, 50, 100, 100);
Folosește exact aceleași argumente ca și fillRect, iar rezultatul va fi o schiță minunată a unui pătrat:
Simplu. Elegant. Uşor. Asta însumează pânză. Toate metodele sunt simple atunci când te uiți în mod individual, dar când sunt utilizate împreună, ele vă permit să desenați niște lucruri destul de uimitoare.
În afară de dreptunghiurile (singurele forme care pot fi desenate cu o singură metodă API), aveți căi. Căile vă permit să desenați linii, atât drepte, cât și curbate, care pot fi combinate pentru a crea forme destul de complexe.
Desenarea unei căi simple necesită utilizarea a câteva metode noi API:
Accentsconagua
beginPath începe o nouă cale.MoveTo mută punctul din care este trasată calea.lineTo trasează o cale dreaptă la acest punct din punctul definit în moveTo sau punctul de la ultimul apel la lineTo.closePath închide calea prin conectarea ultimului punct la punctul de pornire.completati umple calea cu o culoare.accident vascular cerebral schițează calea.Încercați următorul cod:
ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.fill ();
Care va trasa o cale triunghiulară și o va umple:
Puteți utiliza același concept pentru a desena orice altă formă pe care o doriți. Cel de-al doilea articol din această serie va cuprinde mai multe căi avansate în panza, cum ar fi arce (pentru a crea cercuri) și căi Bezier (pentru a crea linii curbe reci).
Lucrul important pe care trebuie să-l amintiți acum este că căile sunt aproape singura modalitate de a atrage ceva mai complicat decât un dreptunghi.
Până acum, tot ce ați desenat a fost umplut sau mângâiat în negru. Ce palpitant! Din fericire, există câteva proprietăți în API-ul JavaScript care vă permit să modificați culoarea formelor pe care le desenați. Aceste proprietăți sunt stil de completare și strokeStyle.
Ambele sunt destul de explicative, deci hai să intrăm și să schimbăm culoarea de umplere a unui dreptunghi:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (50, 50, 100, 100);
Acest lucru vă va oferi un pătrat roșu frumos, după cum urmează:
Sau puteți schimba culoarea stoke-ului unui dreptunghi:
ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Care vă va oferi un pătrat cu un contur roșu:
Frumusețea lui stil de completare și strokeStyle este că ambele acceptă valori normale ale culorii CSS. Asta inseamna ca poti folosi RGB, RGBA, HSA, cuvintele de culoare (ex. "Rosu") si valorile hexazecimale.
Merită să se arate că schimbarea culorii în panza nu va afecta nimic care a fost deja tras. De exemplu, dacă trageți un dreptunghi negru, schimbați stilul de umplere în roșu, apoi trageți un alt dreptunghi; primul dreptunghi va fi în continuare negru.
În afară de schimbarea culorii, puteți modifica și lățimea unei contururi curbate. Pentru a face acest lucru puteți folosi lățimea liniei proprietatea API-ului JavaScript.
Utilizând codul din exemplul anterior, puteți schimba lățimea conturului:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Ceea ce vă va oferi un accident vascular cerebral red și frumos:
Același concept funcționează și pentru căi. De exemplu, puteți schimba triunghiul de mai devreme pentru a avea o contur mai gros:
ctx.lineWidth = 20; ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.stroke ();
Care vă va oferi un triunghi incredibil de interesant:
Există, de asemenea, câteva alte caracteristici ale API-ului JavaScript care vă permit să schimbați modul de trasare a liniilor. De exemplu, lineCap modifică modul în care arată sfârșitul unei linii și lineJoin modifică modul în care arată colțurile într-o linie. Ar trebui să verificați cu siguranță aceste caracteristici (și mai mult) în caietul de sarcini panza.
Ultimul lucru pe care vreau să vă învăț este să ștergeți pânza. Ați învățat cum să desenați forme, dar nu cum să scapi de ele, ceea ce poate fi destul de util.
Din fericire, ștergerea panzei este ușoară; aveți nevoie doar de o metodă din API-ul JavaScript. Această metodă este clearRect, și sarcina sa este de a face ca fiecare pixel din cadrul dreptunghiului să fie transparent.
În acest articol, panza are o lățime de 500 pixeli și o înălțime de 500 de pixeli, astfel încât să puteți șterge cu ușurință întreaga panza prin apelare clearRect ca astfel:
ctx.fillRect (50, 50, 100, 100); ctx.clearRect (0, 0, 500, 500);
Nu este util să vă arătați o captură de ecran a acestui lucru, deoarece dacă ar fi funcționat ar trebui să vedeți absolut nimic. Dreptunghiul umplut este de fapt atras, dar este instantaneu curățat după aceea, deci nu-l vezi.
Notă: Argumentele din clearRect sunt aceleași ca și fillRect; X, y, lăţime și înălţime.
Dacă nu sunteți sigur de lățimea și înălțimea pânzei, puteți, de asemenea, să o ștergeți astfel:
ctx.clearRect (0, 0, canvas.width, canvas.height);
Aceasta utilizează lăţime și înălţime proprietățile pânză element, care este incredibil de util și o modalitate mult mai bună de a face lucrurile.
Nu trebuie să ștergi întreaga pânză dacă nu vrei. Puteți șterge destul de ușor doar o mică parte. De exemplu, imaginați-vă că aveți un pătrat negru desenat lângă un pătrat roșu:
ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Care ar arăta în mod normal în felul următor:
Ați putea șterge pătratul negru și lăsați pătratul roșu intact adăugând un apel la clearRect dedesubt:
ctx.clearRect (50, 50, 100, 100);
Observați cum acest apel pentru clearRect definește o poziție și o dimensiune care este identică cu pătratul negru. Acest lucru înseamnă în esență că va schimba numai pixelii din zona pătratului la negru transparent (eliminându-i):
Foarte drăguț, nu-i așa? Ștergerea panzei nu este ceva ce veți folosi mult cu desene statice, dar este ceva pe care veți folosi multe atunci când învățați să animați mai târziu în această serie.
Canvasul este ușor de folosit, rapid de învățat și mort puternic când îl împingeți la limită.
Deci, așa cum sper că puteți vedea, pânza este o parte deosebit de puternică a browserului. Acesta vă permite să creați grafică, utilizând codul și fără a utiliza un singur plugin. Este ușor de folosit, este ușor de învățat și este puternic mort atunci când o împingeți la limită.
În articolul următor, veți privi unele dintre cele mai avansate caracteristici ale panzei, cum ar fi cercurile de desen, căile curbe și ceva numit starea desenului. Și dacă acest lucru nu este de ajuns, mai târziu în serie veți privi cum să transformați desenele (cum ar fi rotația și scala), cum să manipulați imaginile și să închei cu o privire cum să animați. Va fi foarte interesant, crede-mă.
Pentru moment, sper că ți-am dat suficient pentru a-ți acoperi apetitul pentru pânză și pentru a ieși și a afla mai multe despre el. Panza este o tehnologie fantastică care merită înțeleasă, chiar dacă nu intenționați să o utilizați imediat.
