Wikipédia

Canvas

Ez a közzétett változat, ellenőrizve: 2024. április 21.

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

szerkesztés

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

szerkesztés

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

szerkesztés

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)

szerkesztés

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

szerkesztés

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

szerkesztés

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

szerkeszté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

szerkesztés

Jegyzetek

szerkesztés
  1. ↑ a b A specifikációja
  2. ↑ Canvas tutorial a Mozilla Developer Networks-ön. [2012. augusztus 3-i dátummal az eredetiből archiválva]. (Hozzáférés: 2012. július 31.)
  3. ↑ Ian Hixie: Extending HTML, 2004. július 12. (Hozzáférés: 2011. június 13.)
  4. ↑ Mozilla Developer Connection: HTMLCanvasElement. [2011. június 4-i dátummal az eredetiből archiválva]. (Hozzáférés: 2011. június 13.)
  5. ↑ Opera 9.0 changelog. [2012. szeptember 10-i dátummal az eredetiből archiválva]. (Hozzáférés: 2012. július 31.)
  6. ↑ a b Dive into HTML5: canvas
  7. ↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  8. ↑ [whatwg. [2007. május 2-i dátummal az eredetiből archiválva]. (Hozzáférés: 2007. május 1.)
  9. ↑ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
  10. ↑ HTML Working Group Patent Policy Status – Known Disclosures
  11. ↑ W3C patent policy in use by HTML working group
  12. ↑ Sucan, Mihai: SVG or Canvas? Сhoosing between the two. Opera Software, 2010. február 4. [2010. június 23-i dátummal az eredetiből archiválva]. (Hozzáférés: 2010. május 3.)
  13. ↑ Mozilla drags IE into the future with Canvas element plugin. Ars Technica, 2008. augusztus 19. (Hozzáférés: 2010. május 12.)
  14. ↑ Compatibility tables for the support of HTML5, CSS3, SVG

Fordítás

szerkeszté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

szerkesztés
A lap eredeti címe: „https://hu.wiki.x.io/w/index.php?title=Canvas&oldid=27076737”