Canvas

A Wikipédiából, a szabad enciklopédiából

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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

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 licenszelé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 licenszpolitikájával. Az Apple végül a szabadalmakat a W3C jogdíjmentes szabadalom-licenszével adta ki.[10] Ez annyit jelent, hogy az Apple-nek kötelező jogdíjmentes licenszelé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 | forrásszöveg szerkesztése]

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 | forrásszöveg szerkesztése]

Jegyzetek[szerkesztés | forrásszöveg szerkesztése]

Fordítás[szerkesztés | forrásszöveg szerkesztése]

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.

Külső hivatkozások[szerkesztés | forrásszöveg szerkesztése]