Canvas (HTML)

A Canvas ( eng.  canvas  - " canvas ", rus. kanvas ) egy HTML5 elem , amelyet kétdimenziós bittérképes kép létrehozására terveztek szkriptek segítségével, általában JavaScriptben [1] . A blokk eredete a bal felső sarokban található. A [2] blokk minden eleme ebből épül fel . A koordinátatér mérete nem feltétlenül tükrözi a ténylegesen megjelenített terület méretét [2] . Alapértelmezés szerint szélessége 300 pixel, magassága 150 [2] .

Általában grafikonok rajzolására használják cikkekhez és bizonyos böngészőjátékok játékteréhez. De arra is használható, hogy videót ágyazzon egy oldalba, és teljes értékű lejátszót készítsen.

A WebGL -ben a 3D grafika hardveres gyorsítására használják [ 3] .

explorercanvas JavaScript-könyvtárat a Google adta ki. Archivált 2013. február 11. , amely lehetővé tette a Canvas használatát IE7 és IE8 böngészőkben.

A vászon megnehezítheti a robotok számára a Captchák felismerését . Canvas használatakor nem egy kép töltődik be a szerverről, hanem egy ponthalmaz (vagy egy rajzalgoritmus), amely szerint a böngésző képet rajzol (captcha) [4] .

Történelem

Az elemet canvaselőször az Apple vezette be a Mac OS X rendszerhez készült WebKit motorban , azzal a céllal, hogy később Dashboard és Safari alkalmazásokban is felhasználhassa [1] .

A vászon hiányát az IE-ben a Google úgy javította ki , hogy kiadta saját, JavaScriptben írt kiterjesztését ExplorerCanvas [5] néven .

A vásznat a mai napig gyakrabban használják grafikonok készítésére, egyszerű animációra és játékokra a böngészőkben [6] . A WHATWG a vászon használatát javasolja szabványként a webalkalmazások új generációiban való grafika létrehozásához [7] .

A Mozilla Alapítványnak van egy Canvas 3D nevű projektje [8] , amelynek célja a grafikus gyorsítók alacsony szintű támogatása a 3D képek megjelenítéséhez a HTML canvas elemen keresztül. Emellett vannak olyan könyvtárak, amelyek háromdimenziós modellekkel valósítják meg a munkát , köztük három

Támogatás

Jellemzők

canvaslehetővé teszi, hogy a vászonra helyezze: kép, videó, szöveg. Töltsd ki az egészet egyszínűvel, vagy húzd végig a körvonalakat, vagy akár adj hozzá színátmenetet [9] . A css3 box-shadow és text-shadow tulajdonságokhoz hasonló árnyékok hozzáadása. Végül pedig alakzatok rajzolása vezérlőpontok megadásával. Sőt, mind a vonalak szélességét, mind a vonalrajzoló ecsetet, a vonalkötések stílusát módosíthatja [10] .

Jellemzők

• A vászon magasságának vagy szélességének módosítása törli annak teljes tartalmát és beállításait, vagyis újból létrejön [11] ;
• A referenciapont (0,0 pont) a bal felső sarokban található [12] . De el lehet tolni [13] ;
• Nincs 3D kontextus, vannak külön fejlesztések, de azok nincsenek szabványosítva [14] ;
• A szöveg színe azonban ugyanúgy megadható, mint a CSS, valamint a betűméret.

Optimalizálási példák vagy minták

Ha nem kell újrarajzolnia a vásznat, hanem manipulálnia kell, akkor "lefényképezheti" a teljes vásznat, és elmentheti egy változóba. És dolgozzon már ezzel a rajzzal anélkül, hogy minden manipuláció után rákényszerítené a vászon rajzolását.

Ha nem a teljes képet kell frissíteni, hanem csak egy részét, akkor törölhet egy bizonyos területet a vászonról, és újra rajzolhatja.

A böngészők optimalizálhatják az egyidejűleg futó animációkat azáltal, hogy egyre csökkentik az áttördelések és átfestések számát, ami viszont javítja az animáció pontosságát. Például CSS-átmenetekkel vagy SVG SMIL-lel szinkronizált JavaScript-animációk. Ráadásul, ha egy animációt egy láthatatlan lapon hajtanak végre, a böngészők nem folytatják az újrarajzolást, ami csökkenti a CPU-, GPU- és memóriahasználatot, és ennek következtében csökken az akkumulátorfogyasztás a mobileszközökön [15] . Ehhez használja a requestAnimationFrame-et.

Az összes jelenlegi böngészőben van képelmosódás szűrő nagyításkor. Akkor érdemes használni, ha gyakran pixelenként dolgozza fel a képet. A képet például felére csökkentve, majd hardveresen szűrő segítségével növelve [16] .

Ha a játék lehetővé teszi a játék hátterének és elemeinek külön feldolgozását, akkor célszerű két vásznat egymásra tenni [17] .

A vászon törléséhez a legjobb módszer a clearRect [17] használata , azonban ha csak a szükséges területeket töröljük, akkor a sebesség még tovább nő.

Kritika

• Túlságosan terheli a processzort és a RAM-ot;
• A szemétgyűjtő korlátozottsága miatt nincs mód a memória megtisztítására;
• A tárgyakkal kapcsolatos eseményeket magának kell feldolgoznia [18] ;
• Gyenge teljesítmény nagy felbontás mellett [18] ;
• Minden elemet külön kell megrajzolni [18] .
• Az oldalakon speciális „jelzőfények” létrehozásának lehetősége, az ún. Vászon ujjlenyomat , a felhasználók nyomon követéséhez az interneten.

Előnyök

• Az SVG-vel ellentétben sokkal kényelmesebb sok elem kezelése;
• Hardveres gyorsítással rendelkezik [16] [19] ;
• Minden pixelt manipulálhat [18] ;
• Alkalmazhat képfeldolgozó szűrőket [18] ;
• Számos könyvtár létezik [18] .

Használat

Az elem használata és műveletei csak JavaScripten keresztül lehetségesek.