ELPROS
HTML Canvas

HTML Canvas

HTML Canvas

  • Canvas je oznaka (tag) HTML5 standarda namijenjena crtanju.
  • Canvas je 2D crtaća platforma unutar web preglednika, a koristi JavaScript i HTML.
  • Upotrebom JavaScript-a se može pristupiti čitavom setu funkcija za crtanje linija, pravokutnika, lukova, crta, teksta …
  • On nema vlastiti sadržaj, a od parametara ima samo dimenzije.
  • Canvas API (API – Application Programming Interface – aplikacijsko programsko sučelje) osigurava alate za crtanje grafike putem JavaScript-a i HTML <canvas> elementa.
  • Canvas API je uglavnom namijenjen 2D crtanju, iako postoji mogućnost rada i sa 3D grafikom preko  WebGL API –ja
  • Crtanje grafike s pomoću oznake <canvas> kombinira poznavanje HTML-a, CSS-a i JavaScripta, pa ćemo njega učiti sljedećem poglavlju.

—————————————————————————————————————————————————–

Postavljanje platna za crtanje

  • U HTML datoteci definiran je okvir ili „prazan papir“ unutar kojeg crtamo pomoću JS –a.
  • Canvas kontekst je objekt koji sadrži svojstva i metode koji se mogu koristiti za iscrtavanje grafike unutar HTML5 <canvas> elementa.
  • Svaki <canvas> element može imati najviše jedan kontekst.
  • <canvas> element ima DOM (Document Object Model) metodu getContext() koja se koristi za dobivanje konteksta i funkcija za crtanje.
  • getContext() ima jedan parametar – tip konteksta, koji može biti 2d ili 3d.

Pristup elementu putem njegovog id –a i njegovom kontekstu preko getContext() metode:

var ctx = document.getElementById(‘platno’).getContext(‘2d’);

Funkcija draw() uzima canvas element  i  dobiva 2d kontekst.  Objekt ctx tada može biti korišten za ostvarivanje prikaza canvas -a.

canvas.css

canvas {border: 1px dashed darkgray;}

—————————————————————————————————————————————————–

Koordinatni sustav

  • Koordinatni sustav koji se koristi s <canvas> elementom ima početnu točku u gornjem lijevom kutu canvas–a s koordinatama (0,0)
  • Koordinatni sustav canvas-a nema vidljivih negativnih točaka, odnosno predstavlja jedan kvadrant Kartezijevog koordinatnog sustava.

—————————————————————————————————————————————————–

Crtanje oblika

Canvas podržava samo jedan oblik – pravokutnik. Svi  ostali  oblici  se stvaraju  kombiniranjem jedne ili  više  staza (paths).
 
Za crtanje pravokutnika koristimo funkcije:
  • fillRect (x, y, w, h) – crta ispunjeni pravokutnik
  • strokeRect (x, y, w, h) – crta samo obrub pravokutnika
  • clearRect (x, y, w, h) – daje prozirnost pravokutnika

x i y su koordinate gornje lijevog kuta pravokutnika, a w i h su širina i visina pravokutnika.

—————————————————————————————————————————————————–

Staza – Path []

  • Pomoću funkcije beginPath() započinje se nova staza, a zatvara funkcijom closePath() 
  • moveTo, lineTo, arcTo, arc i slične metode koriste se za dodavanje segmenata stazi
  • funkcija closePath() zatvara oblik tako da crta ravnu liniju od trenutne pozicije do početne
  • Ako je oblik već zatvoren ili  je samo jedna točka u listi, funkcija ne radi ništa
  • Kada  se oblik stvori, mogu  se  koristiti fill() i/ili stroke() za crtanje staze (oblika)
  • stroke() se  koristi  za  crtanje  obruba,  dok fill() ispunjava oblik. 
  • Kada se poziva fill() metoda, staza  će  se  automatski  zatvoriti  pa  nije  potrebno  koristiti closePath() metodu.

Primjer – crtanje trokuta

—————————————————————————————————————————————————–

Crtanje linija

  • lineTo (x, y) – metoda za crtanje ravne linije, x i y su koordinate krajnje točke linije. 
  • Početna točka se određuje metodom moveTo ili je to krajnje točka prethodno nacrtanog segmenta staze.

Neka od često korištenih svojstava:

  • lineWidth = vrijednost         //postavlja širinu (debljinu) linija koje će biti crtane
  • lineCap = type                     //postavlja vrstu završetka linije (type može biti: but, round ili square)
  • lineJoin = type – postavlja vrstu spoja između segmenata staze
  • type može uzeti sljedeće vrijednosti: round, bevel, miter (podrazumijevana vrijednost)

—————————————————————————————————————————————————–

Lukovi

Za crtanje lukova, kružnica i krugova na raspolaganju je arc metoda.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

  • x i y su koordinate centra luka, odnosno kružnice,
  • radius – polumjer 
  • startAngle i endAngle – definiraju početnu i završnu točku luka (kut koji zatvara) izraženo u radijanima
  • anticlockwise – parametar tipa boolean, ako je postavljen na true onda je smjer iscrtavanja luka obrnut od smjera kazaljke na satu

Kutovi se mjere u radijanima, pa se za preračunavanje stupnjeva u radijane može se koristiti sljedeći JS izraz:

rad = (Math.PI/180) * stupnjevi;

—————————————————————————————————————————————————–

Boje

Dodavanje boje oblicima se postiže korištenjem fillStyle i strokeStyle svojstava.
  • fillStyle = color  – postavlja boju ispune oblika
  • strokeStyle = color – postavlja boju obruba oblika, odnosno linije.
  • Podrazumijevana boja za oba svojstva je crna.
  • Canvas omogućava crtanje prozirnih (ili poluprozirnih) oblika i korištenjem svojstva globalAlpha
  • korištenje ovog svojstva se preporučuje kada je potrebno nacrtati više oblika iste transparentnosti
  • globalAlpha = vrijednost  – gdje vrijednost može biti između 0 – potpuno prozirno i 1 – neprozirno, podrazumijevana vrijednost

—————————————————————————————————————————————————–

Gradijenti

HTML5 Canvas omogućava ispunjavanje oblika linearnim i radijalnim gradijentima. 

CanvasGradient objekt generira se pomoću sljedećih metoda:

  • createLinearGradient(x1, y1, x2, y2)                       // x1 i y1 koordinate početne, a x2 i y2 koordinate krajnje točke
  •                 createRadialGradient(x1, y1, r1, x2, y2, r2)           //parametri predstavljaju dva kruga, jedan sa središtem u točki (x1, y1) i       polumjerom r1                                                                              drugi sa središtem u točki (x2, y2) i polumjerom r2.
Nakon što je stvoren CanvasGradient objekt njemu se dodjeljuje boja pomoću metoda addColorStop().

gradient.addColorStop(pos, color) 

pos je broj između 0 i 1 i određuje relativni položaj boje u gradijentu, a color označava boju koju gradijent treba dostići pri tom pomaku. Kreirani objekt se potom pridružuje svojstvima fillStyle i strokeStyle.

—————————————————————————————————————————————————–

“Crtanje” teksta

Canvas nudi dvije metode za rad s tekstom: fillText i strokeText.

Literatura:
https://www.w3schools.com/html/html5_canvas.asp
Sadržaj sa Loomena
Skip to content