Canvas este caracteristica pe care majoritatea dezvoltatorilor web doresc să o utilizeze pentru a dezvolta aplicații web cu adevărat bogate și fără a avea nevoie de un browser, să instaleze aplicații suplimentare.
Canvas pentru aplicații web
Elementul de canvas HTML5
... rezoluția depinde de panza raster, care poate fi utilizată pentru a vizualiza grafica, grafica jocului și alte imagini vizuale.
Deci, cum inserați un document HTML în panza? Este foarte simplu:
Acest cod nu afișează nimic în browser, deoarece panza este goală. Să adăugăm o margine astfel încât să o puteți vedea.
Puteți adăuga mai multe elemente de panza pe pagina dvs. Web. Singura cerință este că fiecare panza are propriul identificator, altfel pagina va avea aceeași pânză. Pentru a afișa o pânză pe pagină, trebuie să vă referiți la panza în context. Context vă oferă acces la proprietățile și metodele 2D care vă permit să desenați și să manipulați imagini în panza. Vom vorbi mai târziu despre context.
Fiecare element grafic are coordonatele x și y.
x - coordonatele orizontale
y - coordonatele verticale
Diferența dintre SVG și Canvas
- Canvasul este mai rapid atunci când compilați grafică complexă
- Puteți salva imaginea din panza, din SVG nu funcționează.
- Întreaga pânză este formată din pixeli.
Iată avantajele SVG.
- SVG nu depinde de rezoluție, poate fi redimensionat pentru diferite rezoluții ale ecranului. Un exemplu.
- SVG este XML și este destinat diverselor elemente.
- SVG este utilă pentru animații complexe.
Și de ce să nu folosiți una pe cealaltă? Dacă site-ul dvs. nu depinde de permisiune, selectați SVG. Dacă dezvoltați un joc și doriți să faceți grafica foarte rapidă sau nu doriți să faceți față cu XML, alegeți Canvas. Pe Internet lucrează împreună și se completează reciproc. Un exemplu.
Canvas și accelerare hardware
În versiunile anterioare ale browserului, redarea grafică - ca și cele mai multe sarcini cu resurse intensive - a fost încredințată CPU-ului. Browserele moderne au fost reproiectate în acest domeniu, prin transferarea unor sarcini grafice cu resurse intense la GPU, procesorul grafic pentru grafică utilizează Direct2D și DirectWrite. Aceasta accelerează procesarea graficelor și facilitează încărcarea CPU-ului (CPU). exemplu
Cantitate 2D API
canvas 2D API este un obiect care vă permite să desenați și să manipulați imagini și grafice în elementul de panza. Pentru a vă referi la contextul canvasului, utilizați metoda getContext. care este un element al pânzei. Are un parametru, care este în prezent al doilea. Aici este fragmentul de cod pentru referințele de context.
Fiecare pânză are contextul propriu, deci dacă pagina dvs. conține mai mult de un element Canvas, trebuie să aveți o referință la fiecare context.
În plus față de getContext, există multe alte funcții în API-ul 2D de panza. Cele mai renumite dintre ele sunt enumerate mai jos.
- scară - vă permite să scalați contextul actual.
- rotire - vă permite să rotiți coordonatele x și y ale contextului curent.
- Salvare - vă permite să salvați starea actuală a contextului.
- restore - vă permite să restaurați starea contextului dintr-o stare salvată anterior.
- font - Obține sau stabilește fontul pentru contextul actual.
- fillText - completați textul cu panza actuală.
- MeasureText - măsoară lățimea curentă a textului specificat.
Acestea nu sunt toate tehnicile atașate la API Canvas 2D.
Forme și culori Canvas
Rectangle panza
Există un întreg grup de proprietăți și funcții pentru desenarea formelor. Să începem cu un dreptunghi. Iată funcțiile potrivite disponibile pentru desenarea dreptunghiurilor.
- FillRect (x, y, w, h) trage un dreptunghi în Canvas folosind stilul de umplere curent
- strokeRect (x, y, w, h) desenează o fereastră care descrie acest dreptunghi în Canvas, folosind stilul de linie curent
- clearRect (x, y, w, h) - elimină toți pixelii din Canvas, dreptunghiul devine transparent negru
Pentru a desena un dreptunghi, cel mai simplu mod este de a folosi FillRect. Acest lucru atrage un dreptunghi pe Canvas folosind FillStyle curent. Iată cum să creați un dreptunghi negru.
Acest cod va afișa un dreptunghi negru, cu cei 5 pixeli de top, cu 5 pixeli și 145 de pixeli drept și înalt.
Dacă nu specificați o culoare, culoarea implicită va fi întotdeauna negru. Pentru a desena un alt dreptunghi, denumiți FillRect cu parametri diferiți. FillStyle poate fi orice culoare, deci poate folosi opacitatea compatibilă cu CSS3. Următorul cod trage trei dreptunghiuri de pânză, culori diferite, aproape semi-transparente.
Desenarea cercurilor de cerneală
Pentru a desena un cerc (circle), este mai bine sa folositi un arc. Arcul atrage un cerc de pânză folosind FillStyle curent. Definiția funcției este mai jos.
- arc (x.y. radius startAngle.endAngle.-anticlockwise) - arcul face un cerc de la capătul unghiului de pornire și se termină la capătul colțului de capăt.
Iată cum să creați un cerc negru în panza.
Negru cerc pânză
Pentru a desena o schemă de cerc, utilizați strokeStyle în loc de FillStyle. Apoi apăsați accidentul în loc să umpleți.
Cercul nu trebuie să fie 360 de grade. Pentru a schimba forma, schimbați raza de început și sfârșit.
Bezier curbe
Model mai complex cu curbe bezier. Această sarcină dificilă poate fi efectuată relativ simplu folosind funcția bezierCurveTo. Această funcție indică subdirectorul curent folosind punctele de control care reprezintă curba bezier. Parametrii bezierCurveTo sunt mai mici.
- bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) - adaugă un punct dat de calea de curent conectat la punctele de inflexiune de date curba anterioare Bezier.
Curba Bezier ar trebui să includă trei puncte. Primele două puncte controlează calculele, iar al treilea, punctul final al curbei. Asta e ceea ce puteți crea cu curbe bezier.
Desen cu curbe bezier
Cu bezieri strâmbi, există multe lucruri pe care le poți desena. Iată un exemplu complex de compoziție a unei fețe zâmbitoare în pânză.
Canvas de culoare de fundal
În panza, puteți amesteca culorile sau puteți umple o culoare solidă chiar și cu un gradient sau un model. Am folosit FillStyle practic în exemplele anterioare. Această funcție umple fundalul contextului cu culoarea și poate fi în mai multe culori. Următorul exemplu este culoarea de fundal, efectul curcubeu.
Dacă nu doriți o culoare solidă, puteți utiliza strokeStyle și strokeRect pentru a desena un contur dreptunghiular. O altă caracteristică a pânzei face posibilă crearea de gradienți. Funcțiile asociate cu acestea sunt listate mai jos.
- addColorStop (offset, color), - adaugă o oprire a culorii cu valori 0.0 offset la un capăt al gradientului, 1.0 offset la capătul opus
- createLinearGradient (x0, y0, x1, y1) - returnează obiectul CanvasGradient, care este un gradient liniar, culorile de-a lungul liniei sunt determinate de coordonatele
- createRadialGradient (x0, y0, z0, x1, y1, r1) - returnează CanvasGradient obiect, care este un gradient radial, colorant con reprezentat prin coordonatele dau următoarele
Un gradient liniar poate fi creat apelând createLinearGradient. Pentru a adăuga o culoare de gradient, trebuie să apelați addColorStop. Apelul la aceasta adaugă culoarea specificată coordonatelor x și y. Următorul exemplu prezintă un gradient linear simplu.
Linii și umbre de text în pânză
Panza are căi, trebuie să fie umplute. Iată câteva dintre proprietățile și funcțiile relevante pentru desenarea liniilor.
- lineWidth [= value] - returnează lățimea curentă a liniei. Setări pentru modificarea lățimii liniei.
- LineCap [= value] - Returnează stilul de linie curent al căii. Poate fi setat să schimbe stilul de linie. Contururile liniei pot fi rotunjite și drepte.
- LineJoin [= value] - returnează linia curentă de stiluri.
Pentru a desena o linie, scrieți funcțiile MoveTo și LineTo. Aceste funcții au coordonatele x și y, care vă spun exact unde doriți să desenați o linie. De asemenea, puteți specifica lățimea liniei folosind lineWidth. Odată ce ați definit un șir, trebuie să apelați o cursă pentru a desena o linie.
Următorul exemplu arată cum să desenezi o serie de linii, de la mare la subțire.
Pentru a adăuga un stil la linie, puteți schimba conturul setând LineCap. Pentru a face marginile rotunjite, trebuie să aplicați LineCap în runda de valori (rotundă) în context.
Linii de panza rotunjite
Text în panza
Textul este la fel de ușor de desenat în elementul de pânză ca și liniile. Unele proprietăți și funcții relevante pentru desenarea textului:
- font [= value] - returnează setările curente ale fontului. Sintaxa este aceeași ca în proprietățile CSS
- textAlign [= value] - returnează opțiunile de aliniere a textului. Valorile posibile: Placi, stânga, dreapta și centru
- TextBaseline [= value] - returnează setările de aliniament curent. Poate fi setat să modifice alinierea ghidurilor principale
- fillText (text, x, y [, MaxWidth]) - umple textul în această poziție
- strokeText (text, x, y [, MaxWidth]) - cursuri de text în această poziție
Pentru a tipări textul în panza, trebuie să utilizați metoda fillText. Am setat dimensiunea fontului și tip folosind setările de fonturi.
Pentru a face textul transparent, setați valoarea la FillStyle.
Adăugarea unui efect, o umbră pentru textul panzei. În acest lucru vom ajuta shadowOffsetX.
Umbra poate fi personalizată pentru orice unghi sau culoare a umbrei după cum doriți.
Acest cod atrage o oaie în pânză.
Acum imaginea poate fi rotită, rotită, decolorată.
Transformări și animații
Iată câteva dintre proprietățile și funcțiile relevante pentru efectuarea conversiei.
- scară (x, y) - modificări în matricea de transformare pentru a aplica transformarea scalei cu caracteristicile specificate
- rotiți (unghiul) - modifică matricea de transformare pentru a aplica transformarea de rotație cu caracteristicile specificate
- traduce (x, y) - modificați matricea de transformare pentru a aplica traducerea transformării cu caracteristicile specificate
- transforma (m11, m12, m21, m22, dx, dy) - modificați matricea de transformare pentru a aplica argumentul matricei c
- setTransform (m11, m12, m21, m22, dx, dy) - modificări ale matricei de transformare la matricea cu argument.
Transformările și animațiile pot funcționa separat, dar dacă le combinați, după cum se arată mai jos, acestea pot produce efecte vizuale puternice. Să începem cu rotația, să rotim și să rotim contextul în pânză. Următorul exemplu arată modul de desenare a unui dreptunghi la fiecare 250 milisecunde și fiecare dreptunghi se rotește ca efectul unei roți rotative. Culoarea este randomizată, pentru a obține un efect strălucitor.
Scalarea elementelor de panza este usoara. Vom adera la codul anterior, cu excepția rotirii, vom scala fiecare dreptunghi în fiecare secundă. Iată codul.
Pentru animațiile complexe, uitați-vă la liniile strălucitoare create de grupul W3C aici. Pentru mai multe informații despre conversiile canvas, faceți clic aici.
Lucrul cu mouse-ul în panza
Probabil că ați ghicit deja, puteți lucra cu mouse-ul în panza. Ca orice element al unei pagini web, puteți returna coordonatele x și y ale mouse-ului folosind metodele pageX și pageY.
Pentru a urmări cursorul mouse-ului în panza, iată un fragment de cod.
În exemplul de mai sus, este atașat un eveniment de captură a mouse-ului, astfel încât atunci când cursorul se mișcă, coordonatele x și y sunt afișate pe pagina web. Este mai greu să faci panza ca o foaie de hârtie pe care poți desena.
concluzie
Aceasta nu este o înregistrare mare, incompletă, sub forma unei lecții, să fie conștienți de faptul că aceste efecte neobișnuite funcționează complet în browserele moderne. Trimiteți-ne schițele, poate că vor lua primul loc pe site-ul nostru.
Postări interesante
Articole similare
Trimiteți-le prietenilor: