New Page 2

Smatram da je važno reći da sam prihvatio ovaj rad i temu da bih naučio više o novom HTML standardu koji je i sam još uvijek rad u napretku i nije jos uvijek usavršen od strane “World Wide Web Consortium (W3C)” i “Web Hypertext Application Technology Working Group” koji su udružili snage i napravili novu verziju HTML-a. Ipak, ovaj novi standard podržava veći broj poznatijih web browsera kao što su Google Chrome, Internet Explorer, Mozzila Firefox i mnogo drugih, koji i nisu toliko poznati. Naravno, govorim o novom standardu po imenu HTML5, što je i tema ovog maturskog rada, na koju ću se bazirati u tekstu koji naknadno slijedi. Želim da napomenem da je ovaj rad usmjeren više prema poznavaocima prethodnih verzija HTML-a i da ću se samo kratko osvrnuti na fundamentalne osnove koje čine svaku HTML stranicu, a zatim ću da usmjerim ovaj rad prema novinama koje HTML5 unosi u svijet web programiranja i po čemu se on razlikuje od svojih prethodnika.Ovaj rad mi je mnogo pomogao u razumijevanju ovog programskog jezika i potrudiću se da sa vama podijelim svoje iskustvo. Takođe bih se zahvalio svojim profesorima koji su mi pomogli u izradi ovog rada. Pa, da počnemo!

HTML(HyperText Markup Language) je programski jezik koji se koristi za kreiranje dokumenata na World Wide Web-u ( www ). HTML se koristi za stvaranje hipertekstualnih datoteka (datoteka koje sadržavaju linkove). To je opisni jezik za stvaranje web stranica. Njime se opisuje izgled dokumenta, pozicije slika, veličina teksta, boja pozadine, boja slova itd. HTML stranice nisu ništa drugo nego obične tekstualne datoteke koje sadržavaju upute kako prikazati stranicu. Za opis stranica se koriste tagovi koji se pišu unutar znakova < i >. Evo primjera:

Jedan tag je ustvari komanda koja govori browser-u šta i kako da uradi tj. na koji način da prikaže sadržaj stranice. Html tagovi su “case insensitive” što znači da nije važno da li ih pišemo velikim ili malim slovima, računar će ih jednako prepoznati. <Html> tag je jedan od najvažnijih i nalazi se na početku svakog HTML dokumenta i govori browseru da je fajl koji se upravo učitava HTML dokument i da kao takvog treba i da ga prikaže. Istom logikom, na kraju dokumenta se stavlja </html> tag i govori browseru da je došao do kraja HTML dokumenta. Većina tagova ima početni i završni tag. Završni tag se dobija dodavanjem “/” ispred početnog taga i označava mjesto na kome prestaje dejstvo tog taga.

Sve html stranice koje napravite moraju imati ekstenziju .html ili .htm (npr. mojastranica.html).

Sve što nam je potrebno da bi napravili jednu Web stranicu praktično već imamo na računaru. To je prije svega jedan najobičniji tekst editor kao što je Notepad. Notepad potražimo u Start meniju pod Programs->Accessories. Sljedeća stvar koja nam je neophodna je Web Browser. I njega sigurno imamo jer čitamo ove tekstove. Bilo da imamo Internet Explorer ili Google Chrome poželjno je da imamo i onaj drugi browser kako bi izgled naših Web stranica provjerili u oba. To je neophodno iz tog razloga što različiti browseri različito tumače neke HTML tagove tako da su obično potrebne neke male korekcije kako bi naše Web stranice imale zadovoljavajući izgled u oba browsera. Kada na Internetu naiđemo na neku zanimljivu stranicu, a ne znamo kako je napravljena, njen izvorni HTML kod možemo pogledati ako u liniji menija odaberemo: View-> Source . Ovo je najbolji način da naučimo nove stvari.

Nakon otvaranja tekst editora „Notepad“ (start>programs>accesories), dobijamo bijelu površinu u kojoj se piše kod za HTML stranicu. Stranica se u svakom trenutku može snimiti aktiviranjem na meniju File, opcija save. Stranicu je potrebno sačuvati pod ekstenzijom .htm ili .html da bi je kompjuter naknadno mogao prepoznati.

Vježba br.1 - Sačuvati stranicu pod imenom proba.htm ili pod imenom koji vama odgovara
Vježba br.2- Otvoriti Internet Explorer(ili neki drugi browser po želji)> u programu pronaći opciju file>open>browse>proba.htm>OK
Nakon aktiviranja dugmeta OK dobija se prozor u kojem se vidi izgled vaše stranice u Internet Exploreru ili nekom drugom web browseru (Safari, Google Chrome, Mozilla Firefox).

· prosti tagovi za opisivanje jednostavnih elemenata logičke strukture. Oblika <X>

· složeni tagovi su zagrade oblika <x> z </x> kojima je opisan izgled dijela teksta

· atributi složenih obilježja oblika <X A1=a A2=b > y </x> koji pružaju dodatne informacije, obično o grafičkom izgledu, dijela teksta Y.

Minimalna struktura HTML stranice obuhvata tagove:
<html>
<head>
<title> Naziv web stranice </title>
</head>
<body> Ovde se unosi sve ono što želite da bude prikazano na web strani
</body>
</html>

HEAD dio je zaglavlje dokumenta i to je ono sto se nalazi između tagova <head> i </head>. Sve što se nađe između ovih tagova neće se prikazati u prozoru browser-a već obično služi da pruži neke informacije o stranici.

Između tagova <title> i </title> stavlja se naslov stranice. To nije naslov koji će se pojavljivati u telu stranice već naslov koji se pojavljuje u naslovnoj liniji browsera

Tijelo strane predstavlja sve ono sto se nalazi između tagova <body> i </body> i pojaviće se kao sadržaj stranice u prozoru browsera.

Ovo je lista najvažnijih tagova i atributa u trenutnom HTML 4.01 standardu koji se jos uvijek koriste na globalnoj internet mreži^[1]:

<title>- Uzeći u obzir da sve stranice imaju nekakav naslov, ovaj tag je jedan od ključnih u svakoj od njih, zato što stavlja naslov web stranice na naslovnu liniju vašeg browsera.Ovaj tag se zatvara sa </title>.

<a> - Budući da je web hipertekst, <a> tag čini sve te veze mogućim.
href-ovaj tag se koristi unutar <a> oznake i predstavlja URL na mjesto gdje će veza da nas dovede

<img> - Web stranice bi trebale prikazivati slike zajedno sa tekstom.<img> Oznaka ukazuje na to da će slika biti prikazana na stranici

alt - alt atribut se koristi za kratak opis na slici. Alt tekst govori korisnicima o čemu slika govori

<p> - Pokazuje da je tekst paragraf. Zatvara se sa </p> i prikazuje kraj i početak paragrafa.

<h1> ... <h6> - Pruža strukturu teksta. <h1> je najvažniji naslov, dok je <h6> najmanje važan

<ul> - Isti kao i <ol> , osim što je lista neuređena

<li> - predmet koji spada u listu

<div> - podjela ili dio stranice. Koristi se kao pomoćno sredstvo za pravljenje strukture HTML-a.

<script> označava da je tekst unutar ove oznake skripta koja će dodati dinamičke i interaktivne mogućnosti na stranicu

type-kada se koristi unutar skripte govori korisniku koja vrsta skripte se koristi.Najčešći skriptni jezik je text / javascript.

<form> - označava da je područje unutar ove oznake HTML forma koja prihvata unose korisnika

<!-> - Komentar. Koristi se za dodavanje teksta u dokumentu koji neće biti prikazan upregledniku i korisno je dokumentirati dizajn stranice.

Sada kada smo obnovili sve osnove HTML stranice, kao i tagove koji su trenutno u upotrebi, vrijeme je da pređemo na glavnu temu ovog rada, a to je HTML5.

HTML5 je zasigurno standard koji će u kratkom vremenskom roku dovesti revolucionaran i novi pogled na web, doprinijeti lakšem i jednostavnijem korištenju ozbiljnijih aplikacija , i omogućiti potpunim početnicima da mnogo brže savladaju sve najvažnije web komponente, od onih najlakših pa i do nekih malo komplikovanijih.Kao što sam već napomenuo, HTML5 je standard koji jos nije u potpunosti prihvaćen i jos uvijek je u nivou razvoja, ali definitivno će dovesti do male revolucije među web programerima, ali i među običnim internet korisnicima. Osim osnovnih dijelova i novina koje nam HTML5 nosi, pokušaću da unesem malo prakse i tako objasnim kako to funkcioniše ovaj programski jezik.

Prvi javno dostupan opis HTML-a je dokument zvan HTML tags (oznake), prvi put se spominje na internetu od strane Tim Berners-Leeja krajem 1991. Taj opis se sastoji od 20 elemenata početnog, relativno jednostavnog dizajna HTML-a. Trinaest tih elemenata još uvijek postoji u HTML4. Postanak mnogih svojih oznaka duguje jednom od ranih jezika za formatiranje teksta, runoff-u. Runoff je razvijen u ranim 1960-im za CTSS (Kompatibilni Time-Sharing System) operacijski sustav. Runoff je kasnije inkorporisan u UNIX operativni sistem u naprednije formatirajuće programe kao što su roff, nroff i troff. Svaka nova verzija HTML-a je razvijana tako da ostane čitljiva na svim web pretraživačima. Tim Berners-Lee je, nakon što je 1994. napustio CERN (Evropsku organizaciju za nuklearno istraživanje), osnovao organizaciju World Wide Web Consortium koja se bavi standardizacijom tehnologija korištenih na webu poznatija kao W3C .

Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio još poprilično ograničen, pa nije bilo moguće čak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom "imenovanom" verzijom – 2.0, no ni ona nije postala standardom.

Januara 1995. W3C objavljuje verziju 3.0, koja donosi mogućnosti definicije tablica. Daljnji razvoj ove verzije HTML-a označilo je prihvatanje "specifičnih" oznaka podržanih u tada najvećim i najprihvaćenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je postojalo više oznaka koje su imale istu funkciju. Podebljani text, na primjer, bilo je moguće definisati oznakom <b>, ali i oznakom <strong> .

HTML4 predstavljen je u decembru 1997., nastavio je s prihvatanjem oznaka nametnutih od strane proizvođača različitih web preglednika, no istovremeno je pokrenuto i "čišćenje" standarda i proglašavanje nekih od njih suvišnim. Manje promjene u specifikaciji ovog standarda predstavljene su u decembru 1999., kada je predstavljena konačna verzija ovog jezika HTML4.01.

HTML 5 je prva nova revizija standarda od HTML 4.01, koji je izdan 1999. Nastao u saradnji World Wide Web Consortium (W3C) i Web Hypertext Application Technology Working Group (WHATWG). Do 2006. godine su ove dvije grupe radile odvojeno, WHATWG je radio sa web formama i aplikacijama, a W3C sa XHTML 2.0. Na svu sreću odlučili su udružiti snage i kreirati novu verziju HTML-a. Izdavanje konačnih specifikacija standarda HTML5 u suprotnosti je s inicijativom Web Hypertext Application Technology Working Group (WHATWG) prema kojoj bi HTML trebao biti "živi" standard koji se stalno nadograđuje, bez oznake verzije specifikacija. HTML5 standard nalazi se u statusu radnog dokumenta (draft), a očekuje se da će postati službeno objavljen sredinom 2012. godine, dok bi konačne specifikacije trebale biti gotove u drugom kvartalu 2014 . Zanimljivo je da već sada veliki broj preglednika ima implementiran sistem koji omogućuje interpretaciju HTML5.

HTML5 donosi brojne nove mogućnosti koje HTML 4.01 i XHTML 1.x nisu imali, kao što je mogućnost reprodukcije videa na stranicama bez korištenja Adobe flasha ili Microsoftovog silverlighta, mogućnost upravljanja pomoću tastature i opcijama za bilo koju vrstu manipulacija, drag and drop, canvas kao i ostali novi elementi.

Prema izvorima jedne istraživačke laboratorije najkorišćenija imena klasa na današnjim web stranicama su footer, header, menu, nav, text, title... Detaljan grafički prikaz dat je na slici: Description: analiza strukture web stranice

Description: analiza strukture web stranice

Prateći ove statistike, kreatori ovog novog standarda, uveli su popriličan broj novih tagova, sa idejom da stranice budu konstruisane tako da budu lako razumljive za sve korisnike, preglednike i web broswere. Evo spiska novih tagova:

Description: struktura HTML5 web stranice

Do kraja ovog rada, kroz primjere i objašnjenja, pozabavićemo se svakim od novih tagova, ali prvo cemo se posvetiti onim tagovima koji utiču na izgled i strukturu stranice.
Programeri su u prošlosti uvijek tražili načine da se što više strukturom i izgledom približe korisniku, samim tim pokušavajući da svoj rad naprave što jasnijim i razumljivijim. Mnogi su imali različite strukture i većina ih je bila jedinstvena po tome. Različita imena, različiti naslovi i nazivi sekcija, oteživali su rad i samom programeru, i njegovim kolegama, a najviše korisnicima i njihovim pretraživačima.Uvođenjem novih tagova uveliko je olakšan posao svima. I dizajnerima i pretraživačima.

Konačno imamo tagove “header” i “footer”, i nema više potrebe za njihovim “vještačkim kreiranjem”. Zatim imamo tag „nav” stvoren za navigaciju kroz sajt, odnosno meni. Dalje, novi tag “article” sada je namenjen glavnom sadržaju na stranici, što bi značilo da sav sadržaj koji je jedinstven i postoji samo na toj stranici trebalo bi da se nalazi unutar ovog taga. Iako veći broj “article” tagova neće uticati na funkcionalnost web stranice, nije preporučljivo koristiti više od jednog. Pored glavnog sadržaja, za sve sporedne sadržaje postoji tag “aside”. Za razliku od prethodnog ovaj tag može biti umnožen na stranici, i kao takav neće narušiti strukturu. Na kraju jedan, donekle sporan tag, pod imenom “section”. Na mnogim web stranicama o HTML5 mnoge debate oko ovog taga se neprestano vode na internetu. Kako i sam naziv kaže, tag je namenjen kreiranju sekcija unutar stranice, međutim, zar tako nešto nije radio i dosadašnji “div” tag. Da, jeste, ali ubuduće sve što bude u okviru “section” taga imaće semantičko značenje, dok sadržaj koji se bude nalazio unutar “div” taga to neće imati. Dakle sekcija može biti sve što se nalazi na stranici i predstavlja korisni sadržaj. Međutim, sekcije mogu biti kreirane i unutar glavnog sadržaja, za grupisanje i izdvajanje njegovih semantički različitih delova,tako da to otvara mjesta za mnoge polemike.

Sad kada smo objasnili ove tagove koji uveliko olakšavaju baratanje web stranicama, vrijeme je da pređemo na neke tagove koje su od veće važnosti u svijetu web programera. Zato krenimo sa tagovima koji su novi i od suštinske važnosti.

Ako u konverzaciji sa web programerima dođemo na temu prijašnjih HTML verzija i njihovih problema, gotovo uvijek čujemo kritiku vezanu za probleme implementacije audio i video komponetana na web stranicama. Problemi su zaista mnogobrojni, počevši od velike lepeze različitih formata koje browseri koriste, pa sve do iritantnih plug-inova koje svakodnevno moramo instalirati da bi omogućili reprodukciju. Ovi problemi su uveliko rješeni u novom HTML standardu uvođenjem “audio” i “video” tagova kojima lako i brzo možemo postavljati ove objekte u naše web stranice. Uz njih često ide i “source” tag koji nam omogućava da navedemo veći niz izvršnih fajlova, koji će da prate jedan drugog u slučaju da ovaj prvi nije u mogućnosti da se očita. Tako je moguće staviti isti video/zvuk različitog formata tako da ga svaki browser može učitati u bilo kojem formatu koji ste zamislili. Kao na primjer:

Vidite samo na kako jednostavan način dobijemo jedan audio plejer na našoj stranici. Dakle, ako se ne otvori mp3 fajl, redom će se otvarati .ogg fajl, a ako i on ne uspije, otvara se .waw fajl, a naposlijetku ako nijedan ne uspije, ispisuje se poruka koja govori da vaš browser ne podržava neki format(ili neka druga poruka po vašem izboru). Potpuno isti princip je i za video formate

Sledeći tagovi koje ću pojasniti su “figure” i “figurecaption” . Njihova namjena je da se na najlakši način unutar vaše strane ubaci “screenshot”, bilješka ili nešto slično, recimo linija programskog koda. Navođenjem “figure” taga formira se odvojena cjelina i zadaje njen sadržaj, dok se sa “figurecaption” opisuje taj sadržaj. Primjer ubacivanja “screenshot-a” :

Još 2 značajna taga koja bih trebao spomenuti su “mark” i “sumary”/”details” tagovi koji ne idu jedan bez drugog. Prvi “mark” tag omogućava nam da markiramo željeni dio teksta, najčešće onaj od najveće važnosti. Ovaj tag je možda sličan <b> atributu zato što ima sličnu funkciju, a to je naglašavanje. Razlika je u tome što “mark” tagom možemo unaprijed da označimo riječi i svaki put kada ta riječ biva napisana ona automatski bude obilježena drugačijom bojom. Na sledećoj slici obratite pažnju na riječi audio i control koje su u okviru ovog taga.

Kombinacija tagova “summary” i “details” omogućava neku vrstu kratkog i dugog sadržaja, gdje je “summary” vid nekog podnaslova ili kraćeg teksta, dok “details” pruža detaljnije informacije o temi. Na primjer, ako korisnik ne želi da čita sve detalje o nekom filmu na stranici koja prodaje filmove, nego samo naslov ili kratki opis, onda se ovi tagovi pokazuju kao veoma korisni. Ako ga taj film po naslovu ili opisu zanima, svi detalji o njemu su dostupni jednostavnim klikom na taj isti naslov, samim tim otvarajući sadržaj “details” taga. Description: summary i details tag html5

Description: summary i details tag html5

To bi bilo to što se tiče novih i najvažnijih tagova u HTML5. Sledeća poglavlja će nam reći više o formama, novim elementima i konceptru Canvasa.

Prilikom pravljenja novih web stranica uvijek dolazimo do trenutka kada moramo da uradimo bar jednu web formu, ako ne i više njih. Programeri često traže najlakši i najmanje konfuzan način da naprave formu koja zaista radi ono za šta je namjenjena. U prethodnim verzijama HTML-a, često su imali problema sa tim. Iako su neki tipovi elemenata formi(text,checkbox,radio button,popup list) u mnogočemu bili dovoljni i poprilično korisni, kreatori HTML5 standarda odlučili su da je ipak vrijeme da se te forme poboljšaju i pojednostave. I nisu pogriješili.Danas, popularizacijom društvenih mreža forme postaju sve potrebnije i potrebnije. Prethodno pomenuti „textbox“ , koji je dotad bio najkorištenija od web formi imala je samo jedno ograničenje, a to je maksimalan broj znakova. To, naravno nije bilo dovoljno. Novi standard je i tu skratio mukotrpan posao.Evo spiska novih tipova elemenata u HTML5 formama:

Trenutno najbolju podršku HTML5 formama ima Opera, mada i neke najnovije forme Internet Explorera daju prednost baš ovim HTML formama. Ipak, sledeći primjeri će biti prikazani u Operi(v. 11) .

Na sledećoj slici prikazana je jednostavna forma za unos nekih osnovnih podataka o osobi. Pogledajte sliku i kod i zapazite kako ovako kratkim kodom možemo da dobijemo maksimalno jednostavnu i korisnu formu za upis nekih najjednostavnijih informacija.Ključne promjene se nalaze u atributu type. Kao što vidite, za unos svih najpotrebnijih informacija imamo već unaprijed odredjene tipove koji sami sebe objašnjavaju: “name” , “url”, “email” , “tel”. Takođe možete da primjetite atribut placeholder koji, kao što vidite, daje neke jednostavne informacije ili upute kako bi pomogao korisniku u nekim nedoumicama za vrijeme ispunjavanja. On se upisuje po želji dizajnera, i nestaje klikom na polje koje se popunjava.

Ovo navođenje tipa polja, rješilo nas je čitavog koda validnosti, samo kratkim dodavanjem atributa “required” kako bi forma morala biti ispunjena. Ako se forma sa tim atributom slučajno ne ispuni, korisnik će vidjeti poruku u kojoj mu piše upozorenje “This is a required field” ili prevedeno: “Ovo polje je obavezno”. Međutim, ako atribut “required” ne postoji tada se to polje može preskočiti i forma će biti uspješno unesena.

Atribut “list” sa navedenim imenom u okviru običnog tekst elementa omogućice vam da kroz tag “datalist” ponudite korisniku izbor više od jedne opcije. Važno je reći da korisnik može da unese vrednost različitu od onih koje su trenutno ponuđene.

Podrazumevanu boju koju želite da se prikazuje u okviru elementa tipa color navodite u “value”.

U okviru ovog poglavlja sa formama trebalo bi objasniti jos jedan vid tipova koji se odnose na unos vremena i datuma na različite načine. Na slici su prikazani svi ti tipovi i njihov izgled u browseru, kao i njihov kod za upotrebu i korištenje.

Sad kada smo završili neke najvažnije stvari u vezi formi, vrijeme je da pređemo na nešto malo teže, ali i zanimljivije, a to je površina za crtanje, ili Canvas.

Dok sam se u prethodnim dijelovima ovog rada uglavnom bavio samo poređenjem komponenata prije i poslije dolaska novog standarda, koncept “canvas-a” zaista je novina kojoj treba posvetiti posebnu pažnju. Prednosti canvasa su zaista velike, i možemo reći da je ovaj koncept unio revoluciju u sve dosadašnje HTML verzije.

Canvas je ustvari markup tag <canvas> </canvas> čijim navođenjem, unutar vašeg browser-a postavljate površinu koja je spremna za crtanje. Tu su moguća podešavanja dimenzija, boja pozadine canvas-a i ostala prilagođavanja u konkretnoj primeni. Na ovu površinu sada možete da postavljate slike, iscrtavate linije, raznorazne oblike, koristite četkice, vršite rotaciju elemenata unutar canvas-a, skaliranje, translaciju, animaciju itd.

Na webu postoje dva načina renderovanja slika, pa otuda imamo rasterske i vektorske slike. Osnovna ideja canvas-a predstavlja izbalansirano rešenje između ova dva načina. Praktično, nivo preciznosti kojom možete raditi je na nivou piksela, što nam govori da se u pozadini ove površine nalazi ogromna tabela piksela kojima možemo pristupiti navođenjem tačnih koordinata. Na slici je prikazana komponenta canvas.

Primjeri će biti malo teži za vježbati i pojasniti, pošto je potrebno da imate instaliran server da bi se canvas mogao da iscrta. Takođe, za korišćenje Canvasa potrebno je poznavanje nekih osnova Javaskripta, tako da ću objasniti samo neke osnove za koje poznavanje ovog jezika i nije toliko potrebno. Slika ispod je šablon koji ću koristiti za objašnjavanje ovog elementa, i iako ima nekoliko linija javaskript-a, mislim da nećete imati problema sa razumijevanjem. Pokušaću samo kroz par primjera da objasnim neku osnovnu upotrebu canvasa, a malo komplikovanije i korisnije funkcije ću ipak da preskočim, zato što zahtjevaju elemente javaskript koda kojeg jos nismo savladali.

Za početak, ajde da nacrtamo jednu nestandardnu figuru. Ovo je njen izgled a u nastavku kod i objašnjenje.

Prve dve linije služe da definišu novu putanju za iscrtavanje i početnu tačku crtanja. Narednih nekoliko linija canvasContext.lineTo(x,y) služe za iscrtavanje linija redom kao što je prikazano na slici, tj usmjeravamo liniju po koordinatnom sistemu, kao da spavajmo dvije tačke, što u suštini i radimo. Zanimljiva je poslednja linija koda u kojoj jednom naredbom odrađujemo dvije stvari, prva je kompletiranje putanje figure, a druga je popunjavanje unutrašnjosti. Zatvaranje putanje može se realizovati posebno naredbom canvasContext.closePath(). Da li neka tačka canvas-a pripada određenoj putanji možete proveriti naredbom canvasContext.isPointInPath(x,y), a povratna informacija je true ili false.

> canvasContext.clearRect (x,y,w,h) //čišćenje canvas-a u pravougaonom obliku počev od tačke sa koordinatama x,y, u širini w i visini h

> canvasContext.fillRect (x,y,w,h) //popunjavanje canvas-a u pravougaonom obliku počev od tačke sa koordinatama x,y, u širini w i visini h

> canvasContext.strokeRect (x,y,w,h) //postavljanje okvira na canvas-u u pravougaonom obliku počev od tačke sa koordinatama x,y, u širini w i visini h

Za crtanje kružnih linija koristi se naredba canvasContext.arc a na primeru koji sledi videćete kako rezultat izlgeda u browser-u.

Prvo stavimo širinu linije (reč je o mjeri u pikselima), njenu boju i boju njene unutrašnjosti, i onda sledi iscrtavanje. Prve dve vrijednosti su pozicije koordinata u kojima se nalazi centar kružnice, potom poluprečnik, početni ugao, završni ugao i bool vrednost koja govori da li se ide u smeru kazaljke na časovniku (false) ili u suprotnom smeru (true).

Dakle,ovako izgleda jedan dio kruga iscrtan u canvas-u. Primjetite da se mjenjanjem tipa true ili false mijenja i punjenje (filling) kruga u smijeru kazaljke na satu, tj suprotno od nje.

Rad sa tekstom poprilično je jednostavan. Prije postavljanja teksta na canvas trebalo bi da postavite parametre kao što su boja teksta, font itd. Kratak primer je dat u nastavku:

Canvas verovatno nikada ne bi bio zanimljiv bez mogućnosti za transformaciju, cijele površine ili nekih njenih dijelova. Funkcije koje pružaju podršku za ovakve opeacije su:

> canvasContext.scale(x,y) – skaliranje celokupnog sadržaja canvas-a x puta po širini, i y puta po visini

> canvasContext.rotate(x) – rotiranje celokupnog sadržaja canvas-a za x radijana

> canvasContext.translate(x,y) – transliranje celokupnog sadržaja cnavas-a x piksela u desno, i y piksela na dole

Ovo bi bilo sve za uvodnu priču o canvas-u. Neću zadirati dublje pošto mislim da je za jednog početnika ovih par osnovnih funkcija sasvim dovoljno da napravi neki web sajt u kojem će moći da iskoristi sve gore objašnjene funkcije, ali i da nauči i isproba jos neke koje ga budu zanimale ili budu potrebne(kao što su gradient,stroke, fill i Drag’n’drop za koje nažalost treba veće poznavanje javaskript programskog jezika).

NAZAD NA POČETNU POČETAK OVE STRANICE

[1] Lista preuzeta sa stranice „http://www.mckremie.com/blog/2009/10/25-of-the-most-used-html-tags-and-tag-attributes/”

[2] Referenca sa: “http://www.wikipedia.org/wiki/HTML”