Platno (kanvas) element
| Ovaj članak je započet ili proširen kroz projekat seminarskih radova. Potrebno je proveriti prevod, pravopis i viki-sintaksu. Kada završite sa proverom, dopišete da nakon |provereno=. |
Platno kao element je deo HTML-a 5 i omogućava dinamičko renderovanje dvodimenzionalnih oblika i bitmap slika pomoću skripti. Predstavlja proceduralni model niskog nivoa koji ažurira bitmapu i koji nema ugrađen scenski graf.
Istorija uredi
Platno je 2004. godine uvela kompanija Epl u WebKit Mac OS X[1] za aplikacije kao što su Dashboard vidžeti i Safari. 2005. godine uveden je i u Geko (lejaut endžin)[2] i 2006. godine u Operu[3]. Standardizovan je od strane radne grupe WHATWG (engl. Web Hypertext Application Technology Working Group).
Upotreba uredi
Platno se sastoji od regije po kojoj može da se crta i koja je definisana sa atributima "visina" i "širina". JavaScript kod može da pristupi ovoj površini preko skupa funkcija za crtanje koje su nalik na onima iz drugih čestih 2D API-ja, čime omogućava dinamičko generisanje grafike. Neke očekivane upotrebe platna su: crtanje grafova, animacije, igre i kompozicija slike.
Primer uredi
Sledeći kod kreira kanvas element na jednoj HTML stranici:
<canvas id="primer" width="200" height="200">
Овај текст се приказује ако ваш претраживач не подржава HTML5 платно.
</canvas>
Korišćenjem JavaScript-a može se crtati po platnu:
var example = document.getElementById('primer');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
Ovaj kod crta crveni pravougaonik na ekranu.
Platno API takođe omogučava čuvanje i ponovno vraćanje vrednosti atributa konteksta platna.
Površina kanvas elementa ili površina za crtanje uredi
Platno zapravo ima dve veličine: veličinu samog elementa i veličinu površine elementa za crtanje. Dodeljivanjem vrednosti atributima visine i širine elementa dodeljujemo vrednosti atributima obema ovih veličina; CSS atributi utiču samo na veličinu elementa a ne na površinu za crtanje.
I veličina elementa i veličina njegove površine za crtanje kao početne vrednosti imaju sledeće: 300 piksela širine i 150 piksela visine. U nabrajanju koje je prikazano u primeru koji koristi CSS da setuje veličinu platna, veličina elementa je širine 600 piksela i visine 300 piksela, ali veličina površine za crtanje ostaje nepromenjena, tj. 300 piksela × 150 piksela. Kada se veličina platna ne poklapa sa veličinom površine za crtanje, pretraživač skalira površinu za crtanje tako da ona odgovara veličini elementa (što može da dovede do neočekivanih i neželjenih efekata).
Primer setovanja veličina elementa platna i površine za crtanje tako da imaju različite vrednosti:
<!DOCTYPE html>
<html>
<head>
<title>Величина елемента платна: 600 x 300,
Величина површине за цртање платна: 300 x 150</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="canvas">
Платно није подржано.
</canvas>
</body>
</html>
Platno ili skalabilna vektorska grafika (SVG) uredi
SVG je raniji standard za crtanje oblika u pretraživaču. Međutim, za razliku od platna, koje je bazirano na rasterskoj grafici, SVG je bazirana na vektorima tj. svaki nacrtani oblik se beleži kao objekat u scenskom grafuili u objektnom modelu dokumenta koji se zatim renderuje u bitmapu. Ovo znači da, ako se atributi SVG-e promene, pretraživač može automatski da ponovo renderuje scenu.
U primeru iznad, jednom kada se pravougaonik nacrta, činjenica da je nacrtan se nigde ne pamti u sistemu. Ako bi mu se pozicija promenila, cela scena bi morala da se ponovo nacrta, uključujući i one objekte preko kojih je nacrtan pravougaonik. U ekvivalentnom primeru kod SVG-e, kada bi došlo do menjanja atributa pravougaonika pretraživač bi odredio kako da ga ponovo nacrta. Postoje dodatne JavaScript biblioteke koje dodaju sposobnosti scenskog grafa elementu platna. Takođe je moguće da se posle bojenja platna u slojevima mogu ponovno kreirati određeni slojevi.
Slike SVG-e su predstavljene u XML-u, i kompleksne scene se mogu kreirati i održavati alatima za editovanje XML-a.
Scenski graf SVG-e omogućava da se baratanje događajima asocira sa objektima, tako da pravougaonik može da odgovori na onClick događaj. Da bi se dobila ista funkcionalnost kada je u pitanju platno, koordinate klika miša i koordinate nacrtanog pravougaonika se moraju poklapati da bi se utvrdilo da li je kliknuto na pravougaonik.
Konceptualno, platno je aplikacioni programski interfejs niskog nivoa na osnovu koga se može napraviti endžin koji, na primer, podržava SVG. Postoje JavaScript biblioteke koje omogućavaju delimičnu implementaciju SVG-e korišćenjem platna za pretraživače koji ne omogućavaju SVG-u ali podržavaju platno, kao što su, na primer, pretraživači u Android operativnom sistemu verzija 2.x. Međutim, ova situacija je komplikovana jer postoje biblioteke scenskih grafova za platno a SVG ima neke funkcionalnosti manipulacije bitmapa.
Reakcije uredi
U vreme kada je predstavljen element platna, dobio je mešovite reakcije od strane zajednice veb standarda. Postojali su argumenti protiv Eplove odluke da se kreira novi vlasnički element umesto da se podrži standar SVG-e. Postojale su i brige oko sintakse, na primer, odsustvo namespace-a [4]
Intelektualna svojina kada je u pitanju kanvas element uredi
Na dan 14. marta 2007. godine, Dejv Hajat (radio je na razvoju WebKit-a) prosledio je imejl koji je dobio od Eplovog senior saveta za patente[5], koji je navodio da je Epl kompanija rezervisala sva intelektualna prava vezana za WHATWG-ove veb aplikacije[6] ali da ostavljaju otvorena vrata licenciranju patenta u slučaju da se specifikacije prenesu telu standarda sa formalnom polisom patenta. Ovo je izazvalo značajnu diskusiju među razvijačima veba i pokrenulo pitanja vezana za WHATWG-ov nedostatak polisa nad patentima u poređenju sa WWW konzorcijumovim (W3C) eksplicitnim favorizovanjem licenca bez povlastica koje se ostvaruju plaćanjem[7]. Kompanija Epl je kasnije obelodanila patente pod uslovima W3C-ove licence bez povlastica koje se ostvaruju plaćanjem. Epl kompanija je morala da omogući licenciranje patenta kad god element platna bude postao deo buduće W3C preporuke kreirane od strane HTML radne grupe.[8]
Podrška pretraživača uredi
Element platna podržavaju trenutne verzije pretraživača Mozilla Firefox Google Chrome, Internet Exploer, Safari, i Opera[9]. Starije verzije Internet Exploer-a, verzija 8 i ranije, ne podržavaju platno, međutim Google i Mozilla podržavaju.[10]
Detaljan pregled podrške platna kada su u pitanju najpopularniji veb pretraživači[11] (kao procenat podele tržišta od jula 2013. godine):
| Internet eksplorer | Fajerfoks | Safari (Desktop) | Kroum | Opera (Desktop) | Safari (Mobilni uređaji) | Opera (Mobilni uređaji) | Android pretraživači |
|---|---|---|---|---|---|---|---|
| 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 |
| 20% | 17% | 7% | 36% | 1% | 4% | 3% | 5% |
Vidi još uredi
Reference uredi
- ^ Hixie, Ian (12. 7. 2004). „Extending HTML”. Pristupljeno 13. 6. 2011.
- ^ Mozilla Developer Connection. „HTMLCanvasElement”. Arhivirano iz originala 04. 06. 2011. g. Pristupljeno 13. 6. 2011.
- ^ „Opera 9.0 changelog”. Arhivirano iz originala 21. 04. 2012. g. Pristupljeno 28. 05. 2015.
- ^ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
- ^ „Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007”. Arhivirano iz originala 2. 5. 2007. g. Pristupljeno 28. 5. 2015.
- ^ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
- ^ HTML Working Group Patent Policy Status – Known Disclosures
- ^ W3C patent policy in use by HTML working group
- ^ Sucan, Mihai (4. 2. 2010). „SVG or Canvas? Shoosing between the two”. Opera Software. Arhivirano iz originala 23. 06. 2010. g. Pristupljeno 3. 5. 2010.
- ^ „Mozilla drags IE into the future with Canvas element plugin”. Ars Technica. 19. 8. 2008. Pristupljeno 12. 5. 2010.
- ^ „Compatibility tables for the support of HTML5, CSS3, SVG”. Pristupljeno 27. 7. 2011.
Spoljašnje veze uredi
- The
canvaselement, W3C, 28. 10. 2014, Pristupljeno 9. 1. 2015 - HTML Canvas 2D Context, W3C, 21. 8. 2014, Pristupljeno 9. 1. 2015
- Canvas description in WHATWG Web Applications draft specifications
- Canvas reference page in Apple Developers Connection Arhivirano na sajtu Wayback Machine (25. jul 2008)
- Basic Canvas Tutorial on Opera Developer Community
- Canvas tutorial and introductory page on Mozilla Developer center Arhivirano na sajtu Wayback Machine (3. avgust 2012)