Otisni knjiguOtisni knjigu

HTML Canvas

Sjedište: CARNET Loomen LMS
E-kolegij: Skriptni jezici i web programiranje 4TR2
Knjiga: HTML Canvas
Otisnuo/la: Gost (anonimni korisnik)
Datum: subota, 15. studenoga 2025., 21:51

Sadržaj

  • 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.

<canvas id=“platno“ width=“300“ height=“300“></canvas>

  • 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’);


Primjer:


index.html


canvas.js

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 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.


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.


Primjer 1:









Primjer 2:



  • 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


  • 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)


Primjer:


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;


Primjer:



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.

Primjer: 


  • 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


Primjer:


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.


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