Plátno (HTML)

Aktuální verze stránky ještě nebyla zkontrolována zkušenými přispěvateli a může se výrazně lišit od verze recenzované 29. dubna 2016; kontroly vyžadují 24 úprav .

Canvas ( angl.  canvas  - " canvas ", rus. kanvas ) je HTML5 element určený k vytvoření dvourozměrného bitmapového obrázku pomocí skriptů, obvykle v JavaScriptu [1] . Počátek bloku je vlevo nahoře. Každý prvek bloku [2] je z něj postaven . Velikost souřadnicového prostoru nemusí nutně odrážet velikost skutečně zobrazené oblasti [2] . Ve výchozím nastavení je jeho šířka 300 pixelů a výška 150 [2] .

Používá se zpravidla pro kreslení grafů pro články a herní pole v některých prohlížečových hrách. Dá se ale použít i pro vložení videa do stránky a vytvoření plnohodnotného přehrávače.

Používá se ve WebGL pro hardwarovou akceleraci 3D grafiky [3] .

Knihovna JavaScript explorercanvas vydaná společností Google Archivováno 11. února 2013. , který umožňoval práci s Canvasem v prohlížečích IE7 a IE8.

Canvas může robotům ztížit rozpoznání Captchas . Při použití canvasu se ze serveru nenačítá obrázek, ale množina bodů (nebo kreslicí algoritmus), podle kterých prohlížeč kreslí obrázek (captcha) [4] .

Historie

Tento prvek canvasbyl poprvé představen společností Apple v enginu WebKit pro Mac OS X s ohledem na jeho následné použití v aplikacích Dashboard a Safari [1] .

Nedostatek plátna v IE opravil Google vydáním vlastního rozšíření napsaného v JavaScriptu s názvem ExplorerCanvas [5] .

K dnešnímu dni se canvas častěji používá pro grafy, jednoduché animace a hry v prohlížečích [6] . WHATWG navrhuje použití plátna jako standardu pro tvorbu grafiky v nových generacích webových aplikací [7] .

Mozilla Foundation má projekt nazvaný Canvas 3D [ 8] , jehož cílem je přidat nízkoúrovňovou podporu pro grafické akcelerátory pro zobrazování 3D obrázků prostřednictvím elementu HTML canvas. Spolu s tím existují knihovny, které implementují práci s trojrozměrnými modely, mezi nimi tři

Podpora

TJ Firefox safari Chrome Opera iOS Android
9,0+ 3.0+ 3.0+ 3.0+ 10,0+ 3.0+ 1,0+

Funkce

canvasumožňuje umístit na plátno: obrázek, video, text. Vyplňte to vše jednolitou barvou, nebo potáhněte obrysy, nebo dokonce přidejte přechod [9] . Přidání stínů podobných vlastnostem box-shadow a text-shadow css3. A konečně kreslení tvarů určením kontrolních bodů. Navíc můžete měnit jak šířku čar, tak i štětec na kreslení čar, styl spojování čar [10] .

Funkce

Příklady optimalizace nebo vzory

Pokud plátno nepotřebujete překreslovat, ale potřebujete s ním manipulovat, pak můžete celé plátno „vyfotit“ a uložit do proměnné. A pracujte již s tímto výkresem, aniž byste nutili plátno kreslit po každé manipulaci.

Pokud by neměl být aktualizován celý obrázek, ale pouze jeho část, můžete vymazat určitou oblast na plátně a znovu ji nakreslit.

Prohlížeče mohou optimalizovat animace běžící současně snížením počtu přeformátování a překreslení na jednu, což zase zlepší přesnost animace. Například JavaScriptové animace synchronizované s přechody CSS nebo SVG SMIL. Navíc, pokud je animace provedena na kartě, která je neviditelná, prohlížeče nebudou pokračovat v překreslování, což povede k menšímu využití CPU, GPU, paměti a v důsledku toho ke snížení spotřeby baterie v mobilních zařízeních [15] . Chcete-li to provést, použijte requestAnimationFrame.

Všechny současné prohlížeče mají při přiblížení filtr rozmazání obrazu. Mělo by se používat, pokud často zpracováváte obrázek pixel po pixelu. Zmenšením obrázku např. na polovinu a následným hardwarovým zvětšením pomocí filtru [16] .

Pokud hra umožňuje odděleně zpracovávat pozadí a prvky hry, pak má smysl udělat dvě plátna nad sebou [17] .

Pro vyčištění plátna je nejlepší použít clearRect [17] , pokud však vyčistíte pouze nezbytné oblasti, pak se rychlost ještě zvýší.

Kritika

Výhody

Použití

Použití a operace s prvkem jsou možné pouze prostřednictvím JavaScriptu.

<!doctype html> < html lang = "en" > < head > < title > canvas </ title > < script src = "example.js" ></ script > </ head > < body > < canvas id = " canvas" > Tento prvek není podporován </ canvas > </ body > </ html >

soubor example.js

var plátno = dokument . getElementById ( 'canvas' ), ​​context = canvas . getContext ( '2d' ); function onLoadHandler () { /* Udělejte něco s plátnem další */ } okno . onload = onLoadHandler ;

Příklady

Použití JavaScriptu k nakreslení kruhu < html lang = "en" > < head > < title > circle </ title > </ head > < body > < canvas id = "example" > Obnovte prohlížeč </ canvas > < script > var canvas = document . getElementById ( 'příklad' ), context = canvas . getContext ( '2d' ); function drawCircle ( x , y , r ) { kontext . oblouk ( x , y , r , 0 , 2 * Math . PI , nepravda ); } kontext . beginPath (); drawCircle ( 150 , 75 , 50 ); kontextu . šířka čáry = 15 ; kontextu . strokeStyle = '#0f0' ; kontextu . mrtvice (); </ script > </ body > </ html > Rendering na plátně pythagorejského stromu foukaného < html > < head > < title > Pythagorejský strom </ title > < typ skriptu = "text/javascript" > // funkce nakreslí čáru pod úhlem od zadaného bodu délky ln funkce drawLine ( x , y , ln , úhel ) { kontext . moveTo ( x , y ); kontextu . lineTo ( Math . round ( x + ln * Math . cos ( úhel )), Math . round ( y - ln * Math . sin ( úhel ))); } // Funkce vykreslí stromovou funkci drawTree ( x , y , ln , minLn , úhel ) { if ( ln > minLn ) { ln = ln * 0,75 ; drawLine ( x , y , ln , úhel ); x = matematika . kolo ( x + ln * Math . cos ( úhel )); y = matematika . kolo ( y - ln * Math . sin ( úhel )); drawTree ( x , y , ln , minLn , úhel + Math . PI / 4 ); drawTree ( x , y , ln , minLn , úhel - Math . PI / 6 ); // pokud dáte úhel Math.PI/4 , tak vyjde klasický strom } } // Inicializace proměnných function init () { var canvas = document . getElementById ( "strom" ), x = 100 + ( canvas . width / 2 ), y = 170 + canvas . výška , // pozice stonku ln = 120 , // počáteční délka řádku minLn = 5 ; // minimální délka řádku plátno . šířka = 480 ; // Šířka plátna canvas . výška = 320 ; // canvas height context = canvas . getContext ( '2d' ); kontextu . fillStyle = '#ddf' ; // kontext barvy pozadí . strokeStyle = '#020' ; // kontext barvy čáry . fillRect ( 0 , 0 , canvas . width , canvas . height ); kontextu . šířka čáry = 2 ; // kontext šířky řádku . beginPath (); drawTree ( x , y , ln , minLn , Math . PI / 2 ); kontextu . mrtvice (); } okno . onload = init ; </ script > </ head > < body > < canvas id = "tree" ></ canvas > </ body > </ html >

Knihovny

  • libCanvas je lehký, ale výkonný rámec plátna.
  • Processing.js – Port vizualizačního jazyka Processing
  • EaselJS je knihovna s API podobným Flash
  • PlotKit - knihovna pro vytváření grafů a grafiky
  • Rekapi - Canvas API pro vytváření animací na klíčových snímcích
  • PhiloGL je WebGL framework pro vizualizaci dat, vývoj her a kreativní kódování.
  • JavaScript InfoVis Toolkit - vytvoří interaktivní 2D Canvas vizualizaci dat pro web.
  • Frame-Engine je framework pro vývoj aplikací a her.

Viz také

Poznámky

  1. ↑ 1 2 Průvodce plátnem (MDN) . Získáno 23. března 2015. Archivováno z originálu 30. března 2015.
  2. ↑ 1 2 3 4.12.4 Prvek plátna – HTML Standard . Archivováno z originálu 27. dubna 2009.
  3. ↑ Plátno (MDN) . Získáno 23. března 2015. Archivováno z originálu dne 25. března 2015.
  4. ↑ Příklad vytváření captcha podle teček Archivováno 19. prosince 2013.
  5. ↑ explorercanvas (downlink) . Datum přístupu: 7. února 2013. Archivováno z originálu 11. února 2013. 
  6. ↑ Google propaguje HTML5 jako herní platformu (downlink) . Datum přístupu: 7. února 2013. Archivováno z originálu 11. února 2013. 
  7. ↑ Specifikace z WHATWG (odkaz není k dispozici) . Datum přístupu: 7. února 2013. Archivováno z originálu 11. února 2013. 
  8. ↑ Mozilla Canvas 3D . Datum přístupu: 7. února 2013. Archivováno z originálu 12. března 2013.
  9. ↑ Přechody (nepřístupný odkaz) . Datum přístupu: 7. února 2013. Archivováno z originálu 11. února 2013. 
  10. ↑ Pojďme pracovat s linkami (nepřístupný odkaz) . Získáno 8. února 2013. Archivováno z originálu 11. února 2013. 
  11. ↑ Je možné plátno "znovu načíst"? // Zeptejte se profesora Markapa (odkaz je dole) . Datum přístupu: 5. července 2013. Archivováno z originálu 7. července 2013. 
  12. ↑ Souřadnice plátna (nedostupný odkaz) . Datum přístupu: 5. července 2013. Archivováno z originálu 7. července 2013. 
  13. ↑ Transformace plátna v přístupném jazyce (nepřístupný odkaz) . Datum přístupu: 5. července 2013. Archivováno z originálu 7. července 2013. 
  14. ↑ Zeptejte se profesora Markupa: Otázka: Existuje 3D plátno? (nedostupný odkaz) . Datum přístupu: 7. února 2013. Archivováno z originálu 11. února 2013. 
  15. ↑ Pokročilé animace s requestAnimationFrame (downlink) . Získáno 8. února 2013. Archivováno z originálu 11. února 2013. 
  16. ↑ 1 2 Jak uvolnit sílu HTML5 Canvas pro hry . Získáno 3. listopadu 2013. Archivováno z originálu 3. listopadu 2013.
  17. ↑ 1 2 Zlepšení výkonu HTML5 Canvas – HTML5 Rocks . Získáno 3. listopadu 2013. Archivováno z originálu 4. listopadu 2013.
  18. ↑ 1 2 3 4 5 6 Jaké jsou výhody/nevýhody Canvas vs. DOM ve vývoji her v JavaScriptu? . Získáno 3. listopadu 2013. Archivováno z originálu 4. listopadu 2013.
  19. ↑ Hardwarově akcelerované plátno v Google Chrome . Získáno 3. listopadu 2013. Archivováno z originálu 3. listopadu 2013.

Odkazy

Pracovní příklady Pro informaci
 Grafika na webu
Vektor
Rastrové