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[1] Az elem része a "WhatWG Web applications 1.0" specifikációnak.[2] 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,[3] 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,[4] majd az Opera 2006-ban,[5] é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.[1][6]
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.[6]
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.[7]
Szellemi tulajdon
2007. március 14-én a WebKit-et fejlesztő Dave Hyatt továbbított egy e-mailt az Apple-től,[8] 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,[9] 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.[10] 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.[11]
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.[12] 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.[13]
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):[14]
| 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.0
|
| 7.0 |
7.0 |
4.0 |
14.0 |
11.1 |
4.0 |
11.0 |
2.1
|
| 8.0 |
8.0 |
5.0 |
15.0 |
11.5 |
4.2 - 4.3 |
11.1 |
2.3,3.0
|
| 9.0 |
9.0 |
5.1 |
16.0 |
11.6 |
5.0 |
11.5 |
4.0
|
| 28,87% |
22,97% |
6,37% |
29,15% |
1,59% |
2,31% |
2,21% |
2,13%
|
Lásd még
Jegyzetek
Fordítás
Ez a szócikk részben vagy egészben a canvas element című angol Wikipédia-szócikk fordításán alapul. Az eredeti cikk szerkesztőit annak laptörténete sorolja fel. Ez a jelzés csupán a megfogalmazás eredetét és a szerzői jogokat jelzi, nem szolgál a cikkben szereplő információk forrásmegjelöléseként.
Külső hivatkozások
