Canvas (HTML)

Versiunea actuală a paginii nu a fost încă examinată de colaboratori experimentați și poate diferi semnificativ de versiunea revizuită pe 29 aprilie 2016; verificările necesită 24 de modificări .

Canvas ( eng.  canvas  - " canvas ", rus. kanvas ) este un element HTML5 conceput pentru a crea o imagine bitmap bidimensională folosind scripturi, de obicei în JavaScript [1] . Originea blocului este în stânga sus. Fiecare element al blocului [2] este construit din acesta . Dimensiunea spațiului de coordonate nu reflectă neapărat dimensiunea zonei reale afișate [2] . În mod implicit, lățimea sa este de 300 de pixeli și înălțimea este de 150 [2] .

Este folosit, de regulă, pentru desenarea graficelor pentru articole și terenul de joc în unele jocuri cu browser. Dar poate fi folosit și pentru a încorpora un videoclip într-o pagină și pentru a crea un player cu drepturi depline.

Folosit în WebGL pentru accelerarea hardware a graficelor 3D [3] .

Bibliotecă JavaScript explorercanvas lansată de Google Arhivată 11 februarie 2013. , care a permis lucrul cu Canvas în browserele IE7 și IE8.

Canvas-ul poate îngreuna pentru roboți să recunoască Captchas . Când se utilizează canvas, nu se încarcă o imagine de pe server, ci un set de puncte (sau un algoritm de desen), conform căruia browserul desenează o imagine (captcha) [4] .

Istorie

Elementul canvasa fost introdus pentru prima dată de Apple în motorul WebKit pentru Mac OS X în vederea utilizării sale ulterioare în aplicațiile Dashboard și Safari [1] .

Lipsa pânzei în IE a fost remediată de Google prin lansarea propriei extensii scrise în JavaScript numită ExplorerCanvas [5] .

Până în prezent, pânza este folosită mai frecvent pentru graficare, animație simplă și jocuri în browsere [6] . WHATWG propune utilizarea canvas- ului ca standard pentru crearea de grafică în noile generații de aplicații web [7] .

Fundația Mozilla are un proiect numit Canvas 3D [8] care își propune să adauge suport la nivel scăzut pentru acceleratoarele grafice pentru a afișa imagini 3D prin elementul HTML canvas. Alături de aceasta, există biblioteci care implementează lucrul cu modele tridimensionale , printre care trei

Suport

IE Firefox safari Crom Operă iOS Android
9.0+ 3.0+ 3.0+ 3.0+ 10,0+ 3.0+ 1.0+

Caracteristici

canvasvă permite să plasați pe pânză: imagine, video, text. Umpleți totul cu o culoare solidă sau trasați contururile sau chiar adăugați un gradient [9] . Adăugarea de umbre similare cu proprietățile css3 box-shadow și text-shadow. Și, în sfârșit, desenarea formelor prin specificarea punctelor de control. Mai mult, puteți modifica atât lățimea liniilor, cât și pensula de desen al liniilor, stilul conexiunilor de linii [10] .

Caracteristici

Exemple sau modele de optimizare

Dacă nu trebuie să redesenați pânza, dar trebuie să o manipulați, atunci puteți „face o poză” întregii pânze și o puteți salva într-o variabilă. Și lucrați deja cu acest desen, fără a forța ca pânza să fie desenată după fiecare manipulare.

Dacă nu întreaga imagine ar trebui actualizată, ci doar o parte din ea, atunci puteți șterge o anumită zonă de pe pânză și o puteți desena din nou.

Browserele pot optimiza animațiile care rulează în același timp prin reducerea numărului de reflow și revopsire la unul, ceea ce la rândul său va îmbunătăți acuratețea animației. De exemplu, animații JavaScript sincronizate cu tranziții CSS sau SVG SMIL. În plus, dacă o animație este realizată într-o filă care este invizibilă, browserele nu vor continua să redeseneze, ceea ce va duce la o utilizare mai mică a CPU, GPU, memorie și, ca urmare, la reducerea consumului de baterie în dispozitivele mobile [15] . Pentru a face acest lucru, utilizați requestAnimationFrame.

Toate browserele actuale au un filtru de estompare a imaginii atunci când măriți. Ar trebui folosit dacă procesați adesea imaginea pixel cu pixel. Prin reducerea imaginii, de exemplu, la jumătate și apoi mărirea ei în hardware folosind un filtru [16] .

Dacă jocul vă permite să procesați separat fundalul și elementele jocului, atunci are sens să faceți două pânze una peste alta [17] .

Pentru a șterge pânza, cel mai bun mod este să folosiți clearRect [17] , cu toate acestea, dacă ștergeți doar zonele necesare, atunci viteza va crește și mai mult.

Critica

Beneficii

Utilizare

Utilizarea și operațiunile asupra elementului sunt posibile numai prin JavaScript.

<!doctype html> < html lang = "ro" > < head > < title > canvas </ title > < script src = "example.js" ></ script > </ head > < body > < canvas id = " canvas" > Acest element nu este acceptat </ canvas > </ body > </ html >

exemplu.js fișier

var canvas = document . getElementById ( 'canvas' ), ​​context = canvas . getContext ( '2d' ); function onLoadHandler () { /* Faceți ceva cu pânza următoare */ } fereastra . onload = onLoadHandler ;

Exemple

Utilizarea JavaScript pentru a desena un cerc < html lang = "ro" > < head > < title > circle </ title > </ head > < body > < canvas id = "example" > Actualizează browserul </ canvas > < script > var canvas = document . getElementById ( 'exemplu' ), context = canvas . getContext ( '2d' ); function drawCircle ( x , y , r ) { context . arc ( x , y , r , 0 , 2 * Math . PI , fals ); } context . startPath (); trage un cerc ( 150 , 75 , 50 ); context . lățime de linie = 15 ; context . strokeStyle = '#0f0' ; context . accident vascular cerebral (); </ script > </ body > </ html > Redare pe pânză a unui copac pitagoreic suflat < html > < head > < title > Arborele lui Pitagora </ title > < script type = "text/javascript" > // funcția desenează o linie la un unghi unghi de la un punct specificat de lungime ln function drawLine ( x , y , ln , unghi ) { context . mutăTo ( x , y ); context . lineTo ( Math . round ( x + ln * Math . cos ( unghi )), Math . round ( y - ln * Math . sin ( unghi ))); } // Funcția desenează funcția de arbore drawTree ( x , y , ln , minLn , angle ) { if ( ln > minLn ) { ln = ln * 0,75 ; drawLine ( x , y , ln , unghi ); x = Matematică . rotund ( x + ln * Math . cos ( unghi )); y = Matematică . rotund ( y - ln * Math . sin ( unghi )); drawTree ( x , y , ln , minLn , unghi + Math . PI / 4 ); drawTree ( x , y , ln , minLn , angle - Math . PI / 6 ); // dacă puneți unghiul Math.PI/4 , atunci va ieși arborele clasic } } // Inițializarea variabilelor function init () { var canvas = document . getElementById ( „copac” ), x = 100 + ( pânză . lățime / 2 ), y = 170 + pânză . înălțimea , // poziția tulpinii ln = 120 , // lungimea inițială a liniei minLn = 5 ; // pânză de lungime minimă a liniei . latime = 480 ; // Lățimea pânzei pânzei . inaltime = 320 ; // înălțimea pânzei context = pânză . getContext ( '2d' ); context . fillStyle = '#ddf' ; // contextul culorii de fundal . strokeStyle = '#020' ; // contextul culorii liniei . fillRect ( 0 , 0 , pânză . lățime , pânză . înălțime ); context . lățime de linie = 2 ; // context lățimea liniei . startPath (); drawTree ( x , y , ln , minLn , Math . PI / 2 ); context . accident vascular cerebral (); } fereastra . onload = init ; </ script > </ head > < body > < canvas id = "tree" ></ canvas > </ body > </ html >

Biblioteci

  • libCanvas este un cadru canvas ușor, dar puternic.
  • Processing.js - Un port al limbajului de vizualizare Processing
  • EaselJS este o bibliotecă cu un API similar cu Flash
  • PlotKit - o bibliotecă pentru crearea de diagrame și grafice
  • Rekapi - Canvas API pentru crearea de animații pe cadre cheie
  • PhiloGL este un cadru WebGL pentru vizualizarea datelor, dezvoltarea jocurilor și codificarea creativă.
  • JavaScript InfoVis Toolkit - Creează o vizualizare interactivă a datelor 2D Canvas pentru web.
  • Frame-Engine este un cadru pentru dezvoltarea de aplicații și jocuri.

Vezi și

Note

  1. ↑ 1 2 Canvas Guide (MDN) . Preluat la 23 martie 2015. Arhivat din original la 30 martie 2015.
  2. ↑ 1 2 3 4.12.4 Elementul canvas - Standard HTML . Arhivat din original pe 27 aprilie 2009.
  3. ↑ Canvas (MDN) . Preluat la 23 martie 2015. Arhivat din original la 25 martie 2015.
  4. ↑ Un exemplu de construire a captcha după puncte Arhivat 19 decembrie 2013.
  5. ↑ explorercanvas (link în jos) . Data accesului: 7 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  6. ↑ Google promovează HTML5 ca platformă de jocuri (downlink) . Data accesului: 7 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  7. ↑ Specificații de la WHATWG (link nu este disponibil) . Data accesului: 7 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  8. ↑ Mozilla Canvas 3D . Data accesului: 7 februarie 2013. Arhivat din original pe 12 martie 2013.
  9. ↑ Gradienți (link inaccesibil) . Data accesului: 7 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  10. ↑ Să lucrăm cu linii (link inaccesibil) . Consultat la 8 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  11. ↑ Este posibil să „reîncărcați” pânza? // Întrebați-l pe profesorul Markap (linkul este în jos) . Data accesului: 5 iulie 2013. Arhivat din original pe 7 iulie 2013. 
  12. ↑ Coordonatele canvas (link indisponibil) . Data accesului: 5 iulie 2013. Arhivat din original pe 7 iulie 2013. 
  13. ↑ Transformări canvas într-un limbaj accesibil (link inaccesibil) . Data accesului: 5 iulie 2013. Arhivat din original pe 7 iulie 2013. 
  14. ↑ Întrebați profesorul Markup: Î. Există o pânză 3D? (link indisponibil) . Data accesului: 7 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  15. ↑ Animații avansate cu requestAnimationFrame (downlink) . Consultat la 8 februarie 2013. Arhivat din original pe 11 februarie 2013. 
  16. ↑ 1 2 Cum să dezlănțuiți puterea HTML5 Canvas pentru jocuri . Consultat la 3 noiembrie 2013. Arhivat din original pe 3 noiembrie 2013.
  17. ↑ 1 2 Îmbunătățirea performanței HTML5 Canvas - HTML5 Rocks . Consultat la 3 noiembrie 2013. Arhivat din original pe 4 noiembrie 2013.
  18. ↑ 1 2 3 4 5 6 Care sunt avantajele/dezavantajele Canvas vs. DOM în dezvoltarea jocurilor JavaScript? . Consultat la 3 noiembrie 2013. Arhivat din original pe 4 noiembrie 2013.
  19. ↑ Pânză accelerată hardware în Google Chrome . Consultat la 3 noiembrie 2013. Arhivat din original pe 3 noiembrie 2013.

Link -uri

Exemple de lucru Pentru informații
 Grafică pe Web
Vector
Raster