Uvod

HTML5 Canvas

HTML5

U ovom dijelu će se ukratko objasniti što je to HTML5 te novosti koje nam donosi.

HTML je kratica za HyperText Markup Language. Prikaz hipertekst dokumenta omogućuje web preglednik. Temeljna zadaća HTML jezika jest uputiti web preglednik kako prikazati hipertext dokument. Html datoteke su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni građevni element svake stranice su znakovi (tags) koji opisuju kako će se nešto prikazati u web pregledniku. Povezice unutar HTML dokumenata povezuju dokumente u uređenu hijerarhijsku strukturu i time određuju način na koji posjetitelj doživljava sadržaj stranica.

HTML 5 je prva nova revizija standarda od HTML 4.01, koji je izdan 1999.

Nove mogućnosti

  • Grafički elementi

    • HTML5 nam donosi nove elemente, a to su <canvas> i <svg>

  • Multimedija

    • S dolaskom nove verzije HTML-a, moguće je ugraditi video ili audio file bez korištenja dodatnih alata. To nam omogućavaju <audio> i <video> tagovi.

  • Semantički elementi

    • Ovi elementi nam omogućuju bolje snalaženje unutar HTML dokumenta. Neki od tih elemenata su: <header>, <footer>, <article>, <section>

  • HTML5 API

    • HTML Geolocation, HTML Drag and Drop,HTML Local Storage

Canvas u HTML5

<canvas> tag se koristi za iscrtavanje nekih grafičkih elemenata pomoću nekog skriptnog jezika(javascript), pravokutnog je oblika, te mu možemo zadati širinu i visinu.

Mogućnosti canvasa

  • Prikaz podataka u obliku grafova
  • Animacije
  • Interaktivne igre

Frontend developeri pomoću canvasa donose korisnicima odličan UX.

 
HTML kod:			
<canvas id="nasCanvas" width="500" height="500"><canvas> 

JS kod:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);