A canvas HTML-elem a HTML5 része, mely lehetővé teszi 2 dimenziós alakzatok dinamikus, szkriptelhető renderelését. Egy felbontásfüggő bitmapes "vásznat" biztosít, melyre alakzatok és képek rajzolhatók, majd megjeleníthetők. Használatához szükséges a szkriptelés engedélyezése, anélkül tartalom nem jelenik meg rajta Az elem része a "WhatWG Web applications 1.0" specifikációnak. A HTML5-ben jelent meg.
Története A canvast eredetileg az Apple vezette be a saját Mac OS X WebKit komponensükben, 2004-ben, amely a Mac OS X Dashboard widget-jeiben és a Safari webböngészőben is megtalálható. Később, 2005-ben a Gecko is adaptálta a canvast, majd az Opera 2006-ban, és standardizálta a Web Hypertext Application Technology Working Group (WHATWG).
A HTML5 specifikációja alapján a canvas egy jövőbeli verziója lehetséges, hogy definiálni fog egy 3D-s rajzolást.A specifikációja
Használat A canvas egy, a HTML-ben height (magasság) és width (szélesség) attribútumokkal definiált rajzolható régió. Ezt elérheti egy JavaScript kód egy rajzoló API-n és annak funkcióin keresztül, melyek hasonlóak az egyéb 2D rajzoló API-k funkcióihoz, ezáltal megadván a lehetőséget a dinamikus rajzolásra. A canvas néhány használata lehet a grafikonok, animációk, játékok létrehozása.
Példa Az alábbi kód létrehoz egy canvas elemet az oldalon: <canvas id="pelda" width="200" height="200"> Ez a szöveg akkor jelenik meg a böngészőben, amennyiben az nem támogatja a canvas-t. </canvas>
A JavaScript segítségével lehet rajzolni a canvas-ra: var example = document.getElementById('pelda'); var context = example.getContext('2d'); context.fillStyle = 'red'; context.fillRect(30, 30, 50, 50);
A kód egy piros téglalapot rajzol a képernyőre.
A canvas a width vagy a height attribútum átállításával (akár ugyanakkorára állításával) állítható vissza eredeti állapotába.
A canvas összehasonlítása a Scalable Vector Graphics-szal (SVG) A SVG egy korábbi standard a böngészőkben való képrajzolásra. Mindazonáltal, a raszteralapú canvas-szal ellentétben az SVG vektoralapú, azaz minden rajzolt elem egy színtérgráfban vagy a DOM-ban tárolódik, mely ezután egy bitmap-be renderelődik. Ez azt jelenti, hogy ha az SVG objektum attribútumai megváltoznak, azokat a böngésző újrarenderelheti.
Ez előbbi canvas példában, amikor a téglalap megrajzolódik, a rajzolás tényét a rendszer mintegy "elfelejti". Ha a pozíció megváltoztatására lenne szükség, az egészet újra kell renderelni, beleértve a téglalap által esetlegesen lefedett objektumokat is. De ennek a példának SVG-be való átültetésekor könnyedén változtatható a téglalap attribútuma és a böngésző meg tudná határozni, hogyan kell újrarajzolni. Vannak JavaScript-könyvtárak, melyek a színtérgráf lehetőségét adják a canvas-hoz. Továbbá lehetséges a canvas-t rétegenként megrajzolni és csak a rétegeket újrarajzolni.
Az SVG-képeket egy XML-alapú fájl reprezentálja és a komplex képeket XML-szerkesztőkkel lehet szerkeszteni vagy létrehozni. Az SVG színtérgráf engedélyezi az eseménykezelők létrehozását az objektumokhoz asszociálva, így tehát egy négyzet válaszolhat egy onClick eseményre. Ugyanezen funkcionalitás canvas-szal való létrehozásához az egérkattintás koordinátáinak a téglalap koordinátáival való összeegyeztetése szükséges.
Fogalmilag a canvas egy alacsonyabb szintű API, ami alapján egy motor, mely például az SVG-t is támogatja építhető. Vannak JavaScript-könyvtárak, amelyek részleges SVG-támogatást nyújtanak azon böngészőkhöz, melyek nem támogatják az SVG-t, ám támogatják a canvas-t. Mindazonáltal általánosan nem ez az eset—külön standardot jelentenek. A helyzet bonyolult, mivel van némi színtérgráf támogatás a canvas-hoz és az SVG is rendelkezik némi bitmap-manipulációs képességgel.
Reakciók A canvas elem a bevezetésekor változó fogadtatásban részesült a webes szabványok közösségétől. Voltak érvek az Apple azon döntése körül, miszerint egy új HTML elemet hoz létre, ahelyett, hogy támogatná a már meglevő SVG standardot. Voltak továbbá a szintaxis körül is problémák, így például a névtér hiánya.Ian Hickson remarks regarding canvas and other Apple extensions to HTML
Szellemi tulajdon 2007. március 14-én a WebKit-et fejlesztő Dave Hyatt továbbított egy e-mailt az Apple-től, amely kijelentette, hogy az Apple fenntart minden szellemi tulajdonnal kapcsolatos jogot a WHATWG’s Web Applications 1.0 Working Draft-jával kapcsolatban, amely 2005. március 24-ére lett dátumozva, a 10.01-es szekcióban, “Graphics: The bitmap canvas” címmel,Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas de nyitva hagyta az ajtót a szabadalmak licencelésére, továbbá azok egy, szabadalom-irányelvvel rendelkező kezelőszervezethez való továbbítására. Ez a webfejlesztők körében jelentékeny megbeszélést okozott és kérdéseket vetett fel a WHATWG's szabadalom-irányelvének hiánya miatt, ellentétben a World Wide Web Consortium (W3C) jogdíjmentes licencpolitikájával. Az Apple végül a szabadalmakat a W3C jogdíjmentes szabadalom-licencével adta ki.HTML Working Group Patent Policy Status – Known Disclosures Ez annyit jelent, hogy az Apple-nek kötelező jogdíjmentes licencelést biztosítania a szabadalomra amikor a canvas HTML-elem része lesz a HTML munkacsoport által létrehozott W3C-ajánlásnak.W3C patent policy in use by HTML working group
Támogatás Ezt a HTML-elemet támogatja jelenleg a Mozilla Firefox, a Google Chrome, az Internet Explorer, a Safari, a Konqueror és az Opera jelenlegi verziója. Az Internet Explorer korábbi (8-as vagy alacsonyabb verziószámú) változatai nem támogatják a canvas-t, mindazonáltal elérhetők Google és Mozilla által készített kiegészítők.
Egy részletes áttekintés a canvas HTML-elem támogatásáról a legnépszerűbb böngészők körében (a piaci arány adatai a StatCounter-ből származnak): Internet Explorer Firefox Safari (desktop) Chrome Opera (desktop) Safari (mobil) Opera (mobil) Android Browser 6.0 2.0 - 6.0 3.1 - 3.2 4.0 - 13.0 9.0 - 11.0 3.2 10.0 2.07.0 7.0 4.0 14.0 11.1 4.0 11.0 2.18.0 8.0 5.0 15.0 11.5 4.2 - 4.3 11.1 2.3,3.09.0 9.0 5.1 16.0 11.6 5.0 11.5 4.028,87% 22,97% 6,37% 29,15% 1,59%2,31% 2,21% 2,13%
Lásd még Cairo Display PostScript GDI+ Quartz 2D SVG WebGL
Jegyzetek
Fordítás
Külső hivatkozások Hivatalos W3C leírás a canvas elemre A canvas leírása a WHATWG Web Applications specifikációi közt A canvas referenciája az Apple Developers Connection-ön A canvas alapjainak tutorialja az Opera Developer Community-n Egyszerű canvas bevezetés kezdőnek élő példákkal Canvas tutorial és bevezető oldal a Mozilla Developer center-en W3Schools canvas bevezető egyszerű példákkal
Kategória:HTML